iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS代码计算LocalStorage容量示例详解
  • 701
分享到

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

2024-04-02 19:04:59 701人浏览 薄情痞子
摘要

目录LocalStorage 容量计算总容量已使用容量剩余可用容量LocalStorage 容量 localStorage的容量大家都知道是5M,但是却很少人知道怎么去验证,而且某些

LocalStorage 容量

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

计算总容量

我们以10KB一个单位,也就是10240B1024B就是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容量的资料请关注编程网其它相关文章!

--结束END--

本文标题: JS代码计算LocalStorage容量示例详解

本文链接: https://www.lsjlt.com/news/153429.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS代码计算LocalStorage容量示例详解
    目录LocalStorage 容量计算总容量已使用容量剩余可用容量LocalStorage 容量 localStorage的容量大家都知道是5M,但是却很少人知道怎么去验证,而且某些...
    99+
    2024-04-02
  • 怎么使用JS代码计算LocalStorage容量
    本篇内容主要讲解“怎么使用JS代码计算LocalStorage容量”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用JS代码计算LocalStorage容量”吧!LocalStorage 容...
    99+
    2023-07-02
  • 使用SQL实现车流量的计算的示例代码
    目录卡口转换率1、查出每个地区下每个路段下的车流量2、通过错位连接获取每辆车的行车记录3、获取行车过程中的车辆数4、获取每个卡口的总车辆数5、求出卡口之间的转换率卡口转换率 将数据导...
    99+
    2024-04-02
  • Python实现计算AUC的示例代码
    目录为什么这样一个指标可以衡量分类效果auc理解AUC计算方法一方法二实现及验证AUC(Area under curve)是机器学习常用的二分类评测手段,直接含义是ROC曲线下的面积...
    99+
    2024-04-02
  • Django+Bootstrap实现计算器的示例代码
    目录准备工作导入Bootstrap前端框架编写前端内容编写视图函数准备工作 创建一个应用 添加应用到配置 创建一个html 编写视图函数 from django.short...
    99+
    2024-04-02
  • C#实现公式计算验证码的示例详解
    目录场景需求开发环境开发工具实现代码实现效果场景 现在很多的平台已经不使用普通的数字、字母等验证码了,取而代之的是拼图类、选图类、旋转类或者计算类的验证码。关于字母数字或者中文验证码...
    99+
    2024-04-02
  • JS分层架构低代码跨iframe拖拽示例详解
    目录低代码引擎唤起渲染器 iframe拖拽定位1. 绑定拖放事件2. 获取拖拽过程中的 LocationEvent3. 获取离鼠标最近的 Node4. 获取拖拽对象最近的可放置容器5...
    99+
    2023-02-16
    JS分层架构低代码跨iframe拖拽 JS跨iframe拖拽
  • Python实现计算信息熵的示例代码
    目录一:数据集准备二:信息熵计算三:完整源码分享一:数据集准备 如博主使用的是: 多层感知机(MLP)实现考勤预测二分类任务(sklearn)对应数据集 导入至工程下 二:信息熵计...
    99+
    2022-12-26
    Python计算信息熵 Python 信息熵
  • Python/JS实现常见加密算法的示例代码
    目录前言一、编码,加密二、常见编码1.Base642. Base64 - JS实现3. Base64 - Python实现4.Unicode5.Urlencode三、线性散列算法(签...
    99+
    2024-04-02
  • C++实现统计代码运行时间的示例详解
    目录纯标准库实现类似C#的实现总结本来想自己写的,一看github上面都有就不再重复造轮子了。github上的项目如下: StopWatch 纯标准库实现:使用std::chrono...
    99+
    2023-05-19
    C++统计代码运行时间 C++ 代码运行时间 C++统计时间
  • Spring Aware接口示例代码详解
    若 Spring 检测到 bean 实现了 Aware 接口,则会为其注入相应的依赖。所以通过让bean 实现 Aware 接口,则能在 bean 中获得相应的 Spring 容器资...
    99+
    2024-04-02
  • SpringCloud GateWay网关示例代码详解
    目录一、网关基本概念1、API网关介绍2、Spring Cloud Gateway3、Spring Cloud Gateway核心概念一、网关基本概念 1、API网关介绍 API 网...
    99+
    2024-04-02
  • SpringBoot示例代码整合Redis详解
    目录Redis 简介Redis 优势Redis与其他key-value存储有什么不同添加Redis依赖包配置Redis数据库连接编写Redis操作工具类测试Redis 简介 Redi...
    99+
    2024-04-02
  • Java欧拉函数的计算代码详解
    欧拉函数 在数论,对正整数n,欧拉函数是小于或等于n的正整数中与n互质的数的数目(因此φ(1)=1)。此函数以其首名研究者欧拉命名(Euler's totient function...
    99+
    2024-04-02
  • Golang信号量设计实现示例详解
    目录开篇信号量semaphore 扩展库实现AcquireReleaseTryAcquire总结开篇 在我们此前的文章 Golang Mutex 原理解析 中曾提到过,Mutex 的...
    99+
    2024-04-02
  • java中计算集合的交差并集示例代码
    前言本文主要给大家简单介绍下,如何使用apache commons以及guava的类库来计算集合的交差并集。分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。maven <dependency> <gr...
    99+
    2023-05-31
    java 集合 交差并集
  • js实现验证码输入框示例详解
    目录前言思路遇到的问题HTMLCSSJS前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验...
    99+
    2024-04-02
  • Python+decimal完成精度计算的示例详解
    目录1. 浮点数转Decimal2. Decimal除法设置3. Quantize设置结果4. Decimal精度设置在进行小数计算的时候使用float...
    99+
    2024-04-02
  • DubboConsumer引用服务示例代码详解
    目录Consumer消费者Demo示例ReferenceConfig#getObject()获取应用BeanReferenceConfig#createProxy()创建服务代理Re...
    99+
    2023-03-02
    Dubbo Consumer引用服务 Dubbo Consumer Dubbo引用服务
  • c++代码各种注释示例详解
    目录1、前言2、正文(危)1.以代码例子为例(1)代码段1(2)代码段2(3)代码段3(4)代码段42.其它的注释方法(1)条件编译(2)if条件1、前言 今天想带大家来了解一下注释...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作