获取localStorage的使用容量和最大容量

（一）前言我们最近需要涉及一套前端缓存库, 主要对一些列表数据进行本地缓存, 避免二次进入页面空白时间太长，这里内嵌webview，持久缓存就需要使用localStorage。这里主要讲述怎么计算当前使用体积和剩余体积（二）最大容量<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">&

Justin0223

3623人浏览 · 2020-11-23 21:02:36

Justin0223 · 2020-11-23 21:02:36 发布

（一）前言
我们最近需要涉及一套前端缓存库, 主要对一些列表数据进行本地缓存, 避免二次进入页面空白时间太长，这里内嵌webview，持久缓存就需要使用localStorage。这里主要讲述怎么计算当前使用体积和剩余体积

（二）最大容量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>容量</title>
</head>
<body>
  <div class="total">
    总数：
  </div>
  <button class="btn2">获取总数</button>
  <hr />
 <script>
   function getTotalSize() {
     localStorage.clear();
     var test = '0123456789';
     var add = function(num) {
       num += num;
       if(num.length === 10240) {
         test = num;
         return;
       }
       add(num);
     }
     add(test);
     var sum = test;
     var timer = setInterval(function(){
       sum += test;
       try {
         localStorage.removeItem('test');
         localStorage.setItem('test', sum);
         document.querySelector('.total').innerHTML = '总数：' +  sum.length / 1024 + 'KB'
       } catch(e) {
         alert(sum.length / 1024 + 'KB超出最大限制');
         clearInterval(timer);
       }
     }, 0.1)

   }

   document.querySelector('.btn2').addEventListener('click', function () {
     getTotalSize();
   })

 </script>
</body>
</html>

点击获取后，得到结果如下
在这里插入图片描述

（三）剩余容量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>容量</title>
</head>
<body>
  <div class="use">
    使用：
  </div>
  <button class="btn1">获取使用</button>
  <hr />
  <div class="total">
    总数：
  </div>
  <button class="btn2">获取总数</button>
  <button class="btn3">暂停总数</button>
  <hr />
 <script>
   function getUseSize() {
     var size = 0;
     for(item in window.localStorage) {
       if(window.localStorage.hasOwnProperty(item)) {
         size += window.localStorage.getItem(item).length;
       }
     }
     document.querySelector('.use').innerHTML = '使用：' +  (size / 1024).toFixed(2) + 'KB'
   }

   document.querySelector('.btn1').addEventListener('click', function () {
     getUseSize();
   })

   var timer
   function getTotalSize() {
     localStorage.clear();
     var test = '0123456789';
     var add = function(num) {
       num += num;
       if(num.length === 10240) {
         test = num;
         return;
       }
       add(num);
     }
     add(test);
     var sum = test;
     timer = setInterval(function(){
       sum += test;
       try {
         localStorage.removeItem('test');
         localStorage.setItem('test', sum);
         document.querySelector('.total').innerHTML = '总数：' +  sum.length / 1024 + 'KB'
       } catch(e) {
         alert(sum.length / 1024 + 'KB超出最大限制');
         clearInterval(timer);
       }
     }, 0.1)

   }

   document.querySelector('.btn2').addEventListener('click', function () {
     getTotalSize();
   })
   document.querySelector('.btn3').addEventListener('click', function () {
     clearInterval(timer);
   })

 </script>
</body>
</html>

在这里插入图片描述

（四）结尾
当然涉及缓存离不开处理过期时间，这里推荐一个库，可以方便处理
lscache

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..