超过localStorage配额（localStorage大小！=文件下载大小）&如何查看本地存储大小

Question

我想不出一个好的标题，所以希望可以。

我正在做的是创建一个离线 HTML5 web 应用程序。 “出于某些原因”，我不希望将某些文件放置在缓存清单中，而是希望将内容放置在 localStorage 中。

所有测试都是在 Mac/Mac OS 10.6.6 版 Google Chrome 中完成的。

我有 4 个 .JSON 文件，总大小恰好为 3,120,792 字节。第一次（在线）访问应用程序时，我会拉下此 JSON 内容并将其放入一个字符串变量中，例如 str。在存储 JSON 字符串之前，我将删除所有 \n 和 \t ，并将 \" 替换为 ' ，以最小化字符串长度。

以下是字符串长度（Chrome 控制台中的 str.length）：

original str : 3,117,764 (this is a concatenation of the contents of the 4 JSON files)
reformatted JSON: 2,732,249 (not too shabby - should save me a few bytes)

但是，现在当我尝试将此字符串存储在 localStorage 中时，出现错误，提示我已超出缓存大小（Error : QUOTA_EXCEEDED_ERR：DOM 异常 22），但此页面没有其他内容缓存（我已手动删除所有 Google Chrome 缓存文件），

为什么会发生这种情况

？

如何最小化此大小以充分利用 localStorage

编辑添加： 我尝试仅将字符串的 1,000,000 个字符保存到 localStorage (localStorage.setItem('x',str.substr(1,1000000)) 中。当我检查 Chrome 缓存文件夹中的 localStorage 文件大小时，是 2MB。它看起来像浏览器使用的是实际的 localStorage 数据库大小，而不是其中存储的数据的大小。这当然很糟糕，但我猜你可以在 localStorage 中存储的最长字符串大约是 2,500,000 个字符？

Answer 1

了解本地存储中可以存储多少字符的一个好方法是通过该链接进行测试：http:// arty.name/localstorage.html。

大小取决于浏览器 HTML5 实现

我的最后一个测试：
Chrome 13/Safari 5/ IPAD 2：2.600.000 个字符
火狐 4：5.200.000
OPERA 11：无限制

Answer 2

http://jsfiddle.net/brucealdridge/j6KdJ/
2,500,000 个字符适用于我的（“5.0（X11；Linux i686）AppleWebKit/534.30（KHTML，如 Gecko）Ubuntu/10.10 Chromium/12.0.742.9 Chrome/12.0.742.9 Safari/534.30”）
3,000,000 则不然。我在想这可能是编码问题，但我刚刚检查过，它不是

Answer 3

奇怪的是，说明最大金额的答案会被接受。难道您不应该验证所有 localStorage 键/值对的当前大小减去浏览器实现的最大限制吗？

这是一个 jsfiddle 来说明这种用法。对于那些想要简单答案的人，请使用以下 js...

 function _calc() { return 1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length; }

更新：此 snippit更加准确。

function _calc(s){var c,e=s||window.localStorage;for(var k in e){if(e.hasOwnProperty(k)){c+=e[k];}}return c?3+((c.length*16)/(8*1024)):0;}