JS代码计算LocalStorage容量示例详解

目录
  • LocalStorage 容量
  • 计算总容量
  • 已使用容量
  • 剩余可用容量

LocalStorage 容量

localStorage的容量大家都知道是5M，但是却很少人知道怎么去验证，而且某些场景需要计算localStorage的剩余容量时，就需要我们掌握计算容量的技能了~~

计算总容量

我们以10KB一个单位，也就是10240B，1024B就是10240个字节的大小，我们不断往localStorage中累加存入10KB，等到超出最大存储时，会报错，那个时候统计出所有累积的大小，就是总存储量了！

注意：计算前需要先清空LocalStorage

let str = '0123456789'
let temp = ''
// 先做一个 10KB 的字符串
while (str.length !== 10240) {
  str = str + '0123456789'
}
// 先清空
localStorage.clear()
const computedTotal = () => {
  return new Promise((resolve) => {
    // 不断往 LocalStorage 中累积存储 10KB
    const timer = setInterval(() => {
      try {
        localStorage.setItem('temp', temp)
      } catch {
        // 报错说明超出最大存储
        resolve(temp.length / 1024 - 10)
        clearInterval(timer)
        // 统计完记得清空
        localStorage.clear()
      }
      temp += str
    }, 0)
  })
}
(async () => {
  const total = await computedTotal()
  console.log(`最大容量${total}KB`)
})()

最后得出的最大存储量为5120KB ≈ 5M

已使用容量

计算已使用容量，我们只需要遍历localStorage身上的存储属性，并计算每一个的length，累加起来就是已使用的容量了~~~

const computedUse = () => {
  let cache = 0
  for(let key in localStorage) {
    if (localStorage.hasOwnProperty(key)) {
      cache += localStorage.getItem(key).length
    }
  }
  return (cache / 1024).toFixed(2)
}
(async () => {
  const total = await computedTotal()
  let o = '0123456789'
  for(let i = 0 ; i < 1000; i++) {
    o += '0123456789'
  }
  localStorage.setItem('o', o)
  const useCache = computedUse()
  console.log(`已用${useCache}KB`)
})()

可以查看已用容量

剩余可用容量

我们已经计算出总容量和已使用容量，那么剩余可用容量 = 总容量 - 已使用容量

const computedsurplus = (total, use) => {
  return total - use
}
(async () => {
  const total = await computedTotal()
  let o = '0123456789'
  for(let i = 0 ; i < 1000; i++) {
    o += '0123456789'
  }
  localStorage.setItem('o', o)
  const useCache = computedUse()
  console.log(`剩余可用容量${computedsurplus(total, useCache)}KB`)
})()

可以得出剩余可用容量

以上就是JS代码计算LocalStorage容量示例详解的详细内容，更多关于JS计算LocalStorage容量的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 一文教你如何实现localStorage的过期机制

    一文教你如何实现localStorage的过期机制

    目录 前言 cookie过期机制 expires和max-age的区别 localStorage数据过期 需求分析: 动手实践 参考文章 总结 前言 我们都知道cookie存储的数据是可以添加过期时间属性(Expires/Max-Age),实现过期的. 那么,LocalStrorage.sessionStrorage可以设置过期吗?? 带着这样的疑问,我们一层层剥开其神秘的面纱. cookie过期机制 我们知道Expires和Max-age都可以设置cookie的过期时间,那么两者存在什么样的异

  • 关于localStorage的存储,读取,删除

    关于localStorage的存储,读取,删除

    目录 localStorage的存储,读取,删除 localStorage存储 localStorage读取 localStorage删除 localStorage使用详解 1. localStorage 简介 2. 调试 localStorage 3. localStorage 的 CRUD localStorage的存储,读取,删除 localStorage存储 我们通过以下方式将数据储存到localStorage中 window.localStorage.setItem('key',val

  • localStorage设置有效期和过期时间的简单方法

    目录 前言 实现思路 实现代码 总结 前言 总所周知localStorage默认是不会过期的,也没有可设置过期的api,如果要实现过期清除就需要自己实现一个api 实现思路 在Storage原型上新增两个方法setCanExpireLocal,getCanExpireLocal,分别用于设置和获取值 实现过期功能至少需要三个时间,存值时间,取值时间,有效时间 存取时间戳都是在函数被调用时在函数内通过Date.now()生成 有效时间在存值的时候传入 如果存值时间戳加上有效时间小于当前时间戳说明还

  • JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任

  • js如何操作localstorage

    目录 js操作localstorage 1.首先封装一个全局方法 2.调用方法 js localstorage(本地存储)必知 HTML API 基本用法 生存期 数据结构 容量限制 域名限制 异常处理 JavaScript 存储对象 js操作localstorage localstorage是web前端常用的本地存储服务,它相对于cookie 有几个优势: ①数据存储量大 ②不会携带给后台,避免传输没用的数据 ③操作简便 1.首先封装一个全局方法 以便各个地方调用 export functio

  • Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

    目录 前言 一.实现效果 二.实现步骤及涉及要点 三.涉及代码 总结 前言 在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态. 这里小马演示使用的是 localStorage + vuex 方法(其他诸如 sessionStorage.cookie 等用法相同,只是功能有所区别). 一.实现效果 实现功能:用户登录成功后,刷新浏览器页面或者关闭浏览器再次打开网页后,登录状态依然保持,直到用户点击登

  • JS代码计算LocalStorage容量示例详解

    JS代码计算LocalStorage容量示例详解

    目录 LocalStorage 容量 计算总容量 已使用容量 剩余可用容量 LocalStorage 容量 localStorage的容量大家都知道是5M,但是却很少人知道怎么去验证,而且某些场景需要计算localStorage的剩余容量时,就需要我们掌握计算容量的技能了~~ 计算总容量 我们以10KB一个单位,也就是10240B,1024B就是10240个字节的大小,我们不断往localStorage中累加存入10KB,等到超出最大存储时,会报错,那个时候统计出所有累积的大小,就是总存储量了!

  • Vue.js实现watch属性的示例详解

    Vue.js实现watch属性的示例详解

    目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原

  • wasm+js实现文件获取md5示例详解

    目录 引言 本文重点 准备工作 测试代码 纯js测试代码 wasm(go)源码 js+wasm测试代码 测试条件 测试目标 chrome (版本:103.0.5060.114) firefox (版本号:103.0.1 (64 位)) 分段计算测试代码 纯js js+wasm 测试结论 firefox chrome 最终结论 引言 在过去的几年里,wasm的话题那真是从早上聊到晚上,可以说处于异常兴奋的状态,但是几年过去了,它慢慢的被大多数人们忘记,原因比较简单——落地难 今天就wasm能给js

  • Node.js 应用探索文件解压缩示例详解

    目录 引言 compressing 解压 压缩 archiver adm-zip 压缩 解压缩 总结 引言 今天在使用 node 脚本对文件处理时,需要实现一个功能,要对一个 zip 压缩包解压出来,修改里面的文件后,重新打包成zip包.node 解压缩文件的场景在实际应用中还是比较常见,下面介绍几个用来解压缩文件的库和使用方法. compressing compressing 是一个使用起来方便.功能非常强大的node库,它可以对文件.文件夹进行解压或压缩,支持tar.gzip.tgz.zip

  • Xterm.js入门官方文档示例详解

    Xterm.js入门官方文档示例详解

    目录 前言 xterm.js是什么? 安装 初始化 使用插件 API文档模块 类 Terminal 构造函数 constructor 接口 插件 attach插件 前后端示例 结语 前言 入职的新公司所在的事业部专注于K12的编程教育.公司项目里有使用xterm.js这个库, 并基于master分支做出了一定的修改.为了尽快的熟悉业务以及公司的代码, 所以这里打算学习xterm.js的文档(粗略的翻译, 方便自己查阅, 凡是保留原文的地方, 是我目前还没有明白具体使用场景和用法的地方) xter

  • highlight.js 代码高亮插件的使用详解

    highlight.js 代码高亮插件的使用详解

    在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压,里面会有j

  • php+js实现点赞功能的示例详解

    最近在做一个视频网站,需要实现视频的点赞功能,我是结合ajax和数据库实现的,数据库的格式为有四个字段:文章id,赞,踩,ip.因为需要一个ip只能点赞一次,所以需要一个ip字段存储点赞的ip,这样便于判断该ip是否已经点赞过了: 我将点赞和踩的图片做成两个按钮:具体代码如下: <button style="margin-left:4px" id="vote" rel="<?php echo 文章id;?>"> <i

  • js setTimeout opener的用法示例详解

    复制代码 代码如下: $("#saveInfo").show(); setTimeout( '$("#saveInfo").hide();',3000); if(opener&& !opener.closed){ opener.location.reload(true); } setTimeout : 延迟多长时间执行什么方法,具体使用:http://www.jb51.net/article/35535.htm opener: 指parent表示父窗

  • js实现窗口全屏示例详解

    前言 该 demo 包含全屏事件.退出全屏事件以及屏幕状态改变的钩子函数的封装 以下是一个完整示例,只需整体拷贝下来运行即可(注意引入了 jquery) 请在这里查看示例☞ fullscreen示例 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script sr

  • JS运算符优先级与表达式示例详解

    JS运算符优先级与表达式示例详解

    前言 运算符优先级决定了表达式中运算执行的先后顺序,优先级越高的运算符会先执行. 运算符优先级 很多时候由于对运算符优先级的不确定,会用括号来确保表达式的执行顺序.如果搞清楚运算符的优先级,即使不用括号也能确保表达式按照正确的顺序执行. 其实单纯靠运算符的优先级来确定表达式的执行过程并不是一个绝对稳妥的做法,比如 new a()['b'] 这样的表达式就没法套用运算符优先级.当然一般情况下,绝大多数表达式我们都可以利用运算符优先级来判断,如果确实遇到比较复杂的难以直观判断出来的情况还是要查询 E

随机推荐