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

Question

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

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

Answer 1

通过使用 JSON 方法将整个 localStorage 对象转换为 JSON 字符串，您也许能够得到一个大概的想法：

JSON.stringify(localStorage).length

我不知道它的字节精度如何，特别是如果您是添加标记的几个字节使用额外的对象 - 但我认为这比认为你只推 28K 而做 280K 更好（反之亦然）。

Answer 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");

从中我得到了以下信息：

Google Chrome

• DOMException：
  • 代码：22
  • 消息：“无法在‘存储’上执行‘setItem’：设置‘数据’的值超出了配额。”
  • 名称：“配额超出错误”

Mozilla Firefox

• DOMException：
  • 代码：1014
  • 消息：“已达到持久存储最大大小”
  • 名称：“NS_ERROR_DOM_QUOTA_REACHED”

Safari

• DOMException：
  • 代码：22
  • 消息：“QuotaExceededError：DOM 异常 22”
  • 名称：“配额超出错误”

Internet Explorer、Edge（社区）

• DOMException：
  • 代码：22
  • 消息：“配额超出错误”
  • 名称：“配额超出错误”

---

我的解决方案

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

---

编辑：删除添加的数据

我忘了提及，要使其真正起作用，您需要删除最初设置的DATA项。通过使用 removeItem() 函数反映了上面的更改。

Answer 3

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

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

不幸的是，这在其他浏览器中似乎不可用。但是我不确定他们是否实施了类似的东西。

Answer 4

您可以使用下面的行来准确计算该值，这里有一个 jsfiddle 用于说明其使用

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

Answer 5

今天在测试时遇到了这个问题（超出存储配额）并提出了解决方案。在我看来，了解限制是什么以及我们所处的位置远不如实施一种功能性方式来继续超出配额的存储有价值。

因此，我们不要尝试进行大小比较和容量检查，而是在达到配额时做出反应，将当前存储减少三分之一，然后恢复存储。如果所述还原失败，则停止存储。

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，此函数将停止剔除并退出存储，此时，您无论如何都不应该进行缓存，对吗？

Answer 6

添加到浏览器测试结果：

Firefox
我=22。

野生动物园
我的 Mac 上的 5.0.4 版本没有挂起。错误为 Chrome。我=21。

歌剧
告诉用户网站想要存储数据但没有足够的空间。用户可以拒绝请求，将限制提高到所需的金额或其他几个限制，或者将其设置为无限制。转到 opera:webstorage 来判断是否出现此消息。我=20。抛出的错误与 Chrome 相同。

IE9标准模式
错误为 Chrome。我=22。

IE8标准模式下的IE9
控制台消息“错误：没有足够的存储空间来完成此操作”。 i=22

旧模式下的 IE9
对象错误。我=22。

IE8
没有要测试的副本，但支持本地存储（http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage）

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

Answer 7

希望我可以在评论中添加这一点 - 没有足够的代表，抱歉。

我运行了一些性能测试 - 期望 JSON.stringify(localStorage).length 在大量 localStorage 占用时成为昂贵的操作。

确实如此 - 比跟踪您存储的内容要贵大约 50 倍，而且 localStorage 越满，情况就越糟。

Answer 8

此函数获取可用/剩余的精确存储：

我为 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 个字符 - Edge
• 5242880 个字符 - Chrome
• 5242880 个字符 - Firefox
• 5000000 个字符 - IE

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

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

Answer 9

的网络存储支持测试来测试您的浏览器

您可以使用我测试过 我的 Android 平板电脑和 Windows 笔记本电脑以及 Chromium 仅在 Windows 上
结果：

1. Firefox（Windows）：

• localStorage：5120k 字符
• sessionStorage：5120k 字符
• globalStorage：*不支持

2. Firefox(android):

• localStorage: 2560k char
• sessionStorage: 无限制（精确测试运行最多 10240k 字符 == 20480k 字节）
• 全局存储：不支持

3. Chromium（Windows）：

• localStorage：5120k char
• sessionStorage：5120k char
• globalStorage：不支持

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

Answer 10

我需要实际模拟和测试我的模块在存储已满时将执行的操作，因此我需要在存储已满时获得接近的精度，而不是接受的答案，后者会以 i^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)
}

Answer 11

 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
 }

Answer 12

这可能会对某人有所帮助。在 Chrome 中，如果需要，可以要求用户允许使用更多磁盘空间：

// 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 了解更多信息。

Answer 13

如果本地存储不可用，此脚本将返回 false，或者将本地存储中的确切可用空间返回到最接近的字符，无论浏览器是否抛出错误，或者在本地存储已满时只是不向本地存储添加任何内容。

var localstorageavail;
function localstoragetest(remaining) {
  if (typeof(Storage) !== "undefined") {
    localstorageavail = true;
    var usedspace = JSON.stringify(localStorage).length;
    if (remaining == true) {
      var unusedspace = 0, data = "m", adddata, stored = 0;
        for (adddata = "m";;) {
          try { 
            localStorage.setItem("UN", data);
            if (stored < JSON.stringify(localStorage).length) {
              stored = JSON.stringify(localStorage).length;
              adddata += adddata;
              data += adddata;
            }
            else throw "toolong";
          } catch(e) {
          if (adddata == "m") break;
          else adddata = "m"; 
          data += adddata;
        }
      }
      var totalspace = JSON.stringify(localStorage).length;
      unusedspace = totalspace - usedspace;
      localStorage.removeItem("UN");
      alert("Space Used Calculated: " + usedspace + " " + "\nUnused space: " + unusedspace + "\nSpace Used according to browser: " + JSON.stringify(localStorage).length)
    }  
  } else {
//    alert("Sorry! No Web Storage support..");
    localstorageavail = false;
  }
  if (localstorageavail == false) return localstorageavail;
  else return unusedspace;
}
localstoragetest(true);