计算本地存储空间的使用情况

https://stackoverflow.com/questions/3027142

26-09-2019
|

题

我正在使用 Bespin 编辑器和 HTML5 的 localStorage 创建一个应用程序。它在本地存储所有文件并帮助语法，使用 JSLint 和其他一些 CSS 和 HTML 解析器来帮助用户。

我想计算已使用了多少 localStorage 限制以及实际有多少。 今天这可能吗？ 我在想不要简单地计算存储的位。但话又说回来，我不确定还有什么是我自己无法衡量的。

解决方案 2

我没有找到一种通用的方法来获取所需浏览器的剩余限制，但我确实发现当您达到限制时，会弹出一条错误消息。这当然在每个浏览器中是不同的。

为了最大化它，我使用了这个小脚本：

for (var i = 0, data = "m"; i < 40; i++) {
    try { 
        localStorage.setItem("DATA", data);
        data = data + data;
    } catch(e) {
        var storageSize = Math.round(JSON.stringify(localStorage).length / 1024);
        console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K");
        console.log(e);
        break;
    }
}
localStorage.removeItem("DATA");

从中我得到了这些信息：

谷歌浏览器

DOM异常：
- 代码：22
- 信息：“无法在‘存储’上执行‘setItem’：设置‘数据’的值超出了配额。”
- 姓名：“超出配额错误”

火狐浏览器

DOM异常：
- 代码：1014
- 信息：“已达到持久存储最大大小”
- 姓名：“NS_ERROR_DOM_QUOTA_REACHED”

苹果浏览器

DOM异常：
- 代码：22
- 信息：“超出配额错误：DOM 异常 22"
- 姓名：“超出配额错误”

互联网浏览器、边缘 （社区）

DOM异常：
- 代码：22
- 信息：“超出配额错误”
- 姓名：“超出配额错误”

我的解决方案

到目前为止，我的解决方案是每次用户保存任何内容时添加一个额外的调用。如果捕获到异常，我会告诉他们存储容量即将耗尽。

编辑：删除已添加的数据

我忘了提及，要使其真正起作用，您需要删除 DATA 最初设定的项目。上面的更改通过使用除去项目（）功能。

其他提示

您可能能够通过使用JSON的方法来把整个localStorage的对象为JSON字符串得到近似的想法：

JSON.stringify(localStorage).length

我不知道该怎么字节准确的还要好，尤其是添加了标记的几个字节，如果你使用的其他对象 - 但我想，这是不是想着你只推28K，而是做280K（最好或反之亦然）。

IE8实现 remainingSpace 属性用于此目的：

alert(window.localStorage.remainingSpace);  // should return 5000000 when empty

不幸的是，似乎这是不是在其他浏览器。但是我不知道他们是否实施类似的东西。

可以使用以下的线精确地计算该值，并这里是用于进行说明的的jsfiddle 其使用

alert(1024 * 1024 * 5 - escape(encodeURIComponent(JSON.stringify(localStorage))).length);

冉到这个今天在测试（超过存储配额）和刮起了解决方案。国际海事组织，知道极限是什么，我们是在关系比实现功能的方式继续保存超出配额远远低于价值。

因此，而不是试图做大小比较和能力的检查，让反应过来的时候，我们已经打了配额，以减少三分之一当前的存储和恢复存储。如果所述复位失败，停止存储。

set: function( param, val ) { 
    try{
        localStorage.setItem( param, typeof value == 'object' ? JSON.stringify(value) : value )
        localStorage.setItem( 'lastStore', new Date().getTime() )
    }
    catch(e){
      if( e.code === 22 ){
        // we've hit our local storage limit! lets remove 1/3rd of the entries (hopefully chronologically)
        // and try again... If we fail to remove entries, lets silently give up
        console.log('Local storage capacity reached.')

        var maxLength = localStorage.length
          , reduceBy = ~~(maxLength / 3);

        for( var i = 0; i < reduceBy; i++ ){
          if( localStorage.key(0) ){
            localStorage.removeItem( localStorage.key(0) );
          }
          else break;
        }

        if( localStorage.length < maxLength ){
          console.log('Cache data reduced to fit new entries. (' + maxLength + ' => ' + localStorage.length + ')');
          public.set( param, value );
        }
        else {
          console.log('Could not reduce cache size. Removing session cache setting from this instance.');
          public.set = function(){}
        }
      }
    }
}

此功能的生命的包装对象物的内部，所以只是public.set调用自身。现在，我们可以添加到存储，而不是担心配额是什么，就是我们太多么接近它。如果单店超过1/3的配额大小就是这个功能将停止扑杀和不干存储，并且在这一点上，你不应该反正缓存，对吧？

要添加到浏览器的测试结果：

<强>火狐 I = 22。

<强> Safari浏览器在我的Mac版本5.0.4没挂。误差铬。 I = 21。

<强>戏告诉该网站要存储数据，但没有足够的空间给用户。用户可以拒绝该请求，向上极限到所需的量或其他几个限制，或者将其设置为无限的。转到歌剧：webstorage说是否出现与否此消息。 I = 20。抛出误差是相同的Chrome。

<强> IE9标准模式误差铬。 I = 22。

<强> IE9在IE8标准模式控制台消息“错误：没有足够的存储可用于完成此操作”。 I = 22

<强> IE9老年模式对象错误。 I = 22。

<强> IE8 没有拷贝到测试，但被支持的本地存储（http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage）

<强> IE7和下面不支持本地存储。

你可以用这个测试你的浏览器网络存储支持测试

我测试过火狐浏览器在我的 Android 平板电脑和 Windows 笔记本电脑上铬仅在Windows结果上：

火狐浏览器（视窗）：
- 本地存储:5120k 字符
- 会话存储:5120k 字符
- 本地存储:*不支持
火狐浏览器（安卓）：
- 本地存储:2560k 字符
- 会话存储:无限制（确切测试运行最多 10240k 字符 == 20480k 字节）
- 本地存储: 不支持
铬（视窗）：
- 本地存储:5120k 字符
- 会话存储:5120k 字符
- 本地存储: 不支持

更新

在 Google Chrome 版本 52.0.2743.116 m（64 位）上，限制稍低一些 5101k 人物。这意味着可用的最大数量可能会在版本中发生变化。

希望我能在注释中添加此 - 没有足够的代表，对不起

我跑一些PERF测试 - 期待JSON.stringify（localStorage的）。长度为在大的localStorage占用昂贵的运算。

http://jsperf.com/occupied-localstorage-json-stringify-length

的确是这样 - 约50倍比跟踪你要存储的更贵，并且变得更糟更充分的localStorage可获得

。

该函数获取精确的可用存储空间/剩余：

我为 localStorage 创建了一套有用的函数 *这里*

http://jsfiddle.net/kzq6jgqa/3/

function getLeftStorageSize() {
    var itemBackup = localStorage.getItem("");
    var increase = true;
    var data = "1";
    var totalData = "";
    var trytotalData = "";
    while (true) {
        try {
            trytotalData = totalData + data;
            localStorage.setItem("", trytotalData);
            totalData = trytotalData;
            if (increase) data += data;
        } catch (e) {
            if (data.length < 2) break;
            increase = false;
            data = data.substr(data.length / 2);
        }
    }
    localStorage.setItem("", itemBackup);

    return totalData.length;
}

// Examples
document.write("calculating..");
var storageLeft = getLeftStorageSize();
console.log(storageLeft);
document.write(storageLeft + "");

// to get the maximum possible *clear* the storage 
localStorage.clear();
var storageMax = getLeftStorageSize();

请注意，这不是很快，所以不要一直使用它。

由此我还发现：Item-Name 将占用与其长度一样多的空间，Item-Value 也将占用与其长度一样多的空间。

我获得的最大存储空间 - 大约 5M：

5000000 个字符 - 边缘
5242880 个字符 - Chrome
5242880 个字符 - Firefox
5000000 个字符 - IE

您将在小提琴中找到一些注释掉的代码，以在控制台中查看进度。

我花了一些时间制作，希望这会有所帮助☺

我需要真正模拟和测试，当存储满了我的模块会做什么，所以我需要得到当存储已满，而不是公认的答案，这失去的是精度在我的速度在近精度^ 2

下面是我的脚本，它应该总是产生10到达内存容量当在精度，相当快，尽管有一些简单的优化...编辑：我做了更好的剧本，并与一个确切的精度：

function fillStorage() {
    var originalStr = "1010101010";
    var unfold = function(str, times) {
        for(var i = 0; i < times; i++)
            str += str;
        return str;
    }
    var fold = function(str, times) {
        for(var i = 0; i < times; i++) {
            var mid = str.length/2;
            str = str.substr(0, mid);
        }
        return str;
    }

    var runningStr = originalStr;
    localStorage.setItem("filler", runningStr);
    while(true) {
        try {
            runningStr = unfold(runningStr, 1);
            console.log("unfolded str: ", runningStr.length)
            localStorage.setItem("filler", runningStr);
        } catch (err) {
            break;
        }
    }

    runningStr = fold(runningStr, 1);  
    var linearFill = function (str1) {
        localStorage.setItem("filler", localStorage.getItem("filler") + str1);
    }
    //keep linear filling until running string is no more...
    while(true) {
        try {
            linearFill(runningStr)
        } catch (err) {
            runningStr = fold(runningStr, 1);
            console.log("folded str: ", runningStr.length)
            if(runningStr.length == 0)
                break;
        }
    }

    console.log("Final length: ", JSON.stringify(localStorage).length)
}

这可以帮助别人。在铬能够请求用户允许使用更多的磁盘空间，如果需要：

// Request Quota (only for File System API)  
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
  window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, function(e) {
  console.log('Error', e); 
});

访问 https://developers.google.com/chrome/whitepapers/storage#asking_more 获得更多的信息。

 try {
     var count = 100;
     var message = "LocalStorageIsNOTFull";
     for (var i = 0; i <= count; count + 250) {
         message += message;
         localStorage.setItem("stringData", message);
         console.log(localStorage);
         console.log(count);
     }

 }
 catch (e) {
     console.log("Local Storage is full, Please empty data");
     // fires When localstorage gets full
     // you can handle error here ot emply the local storage
 }

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

计算本地存储空间的使用情况

更新

该函数获取 精确的 可用存储空间/剩余：

该函数获取精确的可用存储空间/剩余：