如何获得浏览器localStorage的剩余容量

Posted 2020-07-06 Tim.Luo

一、如何获取localStorage的剩余容量

在H5大行其道的今天，localStorage(本地存储)对每一个前断攻城师来说都不太陌生。同时localStorage也给我们带来了极大的便利，不用于cookies的小家子气，localStorage的存储量还是很客观的。

由于浏览器的差异性，导致我们需要对localStorage中的内容做出一部分取舍。而根据目前的市场上浏览器对loaclStorage的兼容性来看，最佳的大小是2.5M左右。如何得到localStorage的容量大小，大概接触过localStorage都会遇到的这么一个问题。

localStorage 中存储的是字符串，根据这一条件，我们可以通过取出所有的localStorage的内容，而其长度就是大小。具体代码如下:

 1 (function(){
 2     if(!window.localStorage) {
 3         console.log(‘浏览器不支持localStorage‘);
 4     }
 5     var size = 0;
 6     for(item in window.localStorage) {
 7         if(window.localStorage.hasOwnProperty(item)) {
 8             size += window.localStorage.getItem(item).length;
 9         }
10     }
11     console.log(‘当前localStorage剩余容量为‘ + (size / 1024).toFixed(2) + ‘KB‘);
12 })()

二、如何获取localStorage最大容量

通过上面的分析，其实思路基本是一样的，都是通过字符长度来判断。

 1  (function() {
 2    if(!window.localStorage) {
 3    console.log(‘当前浏览器不支持localStorage!‘)
 4    }    var test = ‘0123456789‘;
 5    var add = function(num) {
 6      num += num;
 7      if(num.length == 10240) {
 8        test = num;
 9        return;
10      }
11      add(num);
12    }
13    add(test);
14    var sum = test;
15    var show = setInterval(function(){
16       sum += test;
17       try {
18        window.localStorage.removeItem(‘test‘);
19        window.localStorage.setItem(‘test‘, sum);
20        console.log(sum.length / 1024 + ‘KB‘);
21       } catch(e) {
22        console.log(sum.length / 1024 + ‘KB超出最大限制‘);
23        clearInterval(show);
24       }
25    }, 0.1)
26  })()

自己写了一个检测浏览器localStorage的最大容量的页面，麻雀虽小，但五脏俱全 :lol:。