计算localStorage空间的用法

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

从那我得到这个信息:

谷歌浏览器

• 抛出:DOMException:
  • 代码:22
  • 消息:"无法在'存储'上执行'setItem':设置'data'的值超出了配额."
  • 名称:"QuotaExceededError"

火狐浏览器

• 抛出:DOMException:
  • 代码:1014
  • 消息:"达到持久存储最大大小"
  • 名称:"NS_ERROR_DOM_QUOTA_REACHED"

苹果浏览器

• 抛出:DOMException:
  • 代码:22
  • 消息:"QuotaExceededError:DOM Exception 22"
  • 名称:"QuotaExceededError"

Internet Explorer,Edge(社区)

• 抛出:DOMException:
  • 代码:22
  • 消息:"QuotaExceededError"
  • 名称:"QuotaExceededError"

我的解决方案

到目前为止,我的解决方案是每次用户保存任何内容时添加一个额外的调用.如果异常被捕获,那么我会告诉他们他们的存储容量已经用完了.

编辑:删除添加的数据

我忘了提到为了实际工作,你需要删除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 i = 22.

我的Mac上的Safari 5.0.4版没有挂起.Chrome出错.I = 21.

Opera 告诉用户该网站想要存储数据但没有足够的空间.用户可以拒绝该请求,超出所需金额的限制或其他几个限制,或将其设置为无限制.转到opera:webstorage来说明是否出现此消息.I = 20.抛出的错误与Chrome相同.

IE9标准模式 错误为Chrome.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及更低版本 不支持本地存储.