有没有办法增加谷歌浏览器中 localStorage 的大小以避免 QUOTA_EXCEEDED_ERR: DOM Exception 22

Posted 2023-03-05

【中文标题】有没有办法增加谷歌浏览器中 localStorage 的大小以避免 QUOTA_EXCEEDED_ERR: DOM Exception 22

【英文标题】：Is there a way to increase the size of localStorage in Google Chrome to avoid QUOTA_EXCEEDED_ERR: DOM Exception 22

【发布时间】：2011-08-05 12:15:54

【问题描述】：

我编写了一个 web 应用程序，它允许您将图像存储在 localStorage 中，直到您点击保存（如果信号不佳，它可以离线工作）。

当 localStorage 达到 5MB 时，Google Chrome 会在 javascript 控制台日志中产生错误：

未捕获的错误：QUOTA_EXCEEDED_ERR：DOM 异常 22

如何在 Google Chrome 上增加 localStorage 配额的大小？

【问题讨论】：

见：***.com/questions/5302212/…

其实见***.com/a/6281947/632951

相关：Storing Compressed JSON Objects in Local Storage With Lz-string 和 Calculating usage of localStorage space

【参考方案1】：

在这里你可以测试你的程序，你也应该处理超过 cuota 的情况

【参考方案2】：

5MB 是一个硬限制，这很愚蠢。 IndexedDB 给你〜50MB，这是更合理的。为了更容易使用，试试 Dexie.js https://github.com/dfahlander/Dexie.js

更新：

Dexie.js 实际上对于我的简单键值用途来说仍然是一个过度杀伤，所以我编写了这个更简单的脚本https://github.com/DVLP/localStorageDB

有了这个你有 50MB 并且可以像这样获取和设置值

// Setting values
ldb.set('nameGoesHere', 'value goes here');

// Getting values - callback is required because the data is being retrieved asynchronously:
ldb.get('nameGoesHere', function (value) 
  console.log('And the value is', value);
);

复制/粘贴下面的行，以便上面示例中的ldb.set() 和ldb.get() 可用。

!function()function e(t,o)return n?void(n.transaction("s").objectStore("s").get(t).onsuccess=function(e)var t=e.target.result&&e.target.result.v||null;o(t)):void setTimeout(function()e(t,o),100)var t=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB;if(!t)return void console.error("indexDB not supported");var n,o=k:"",v:"",r=t.open("d2",1);r.onsuccess=function(e)n=this.result,r.onerror=function(e)console.error("indexedDB request error"),console.log(e),r.onupgradeneeded=function(e)n=null;var t=e.target.result.createObjectStore("s",keyPath:"k");t.transaction.oncomplete=function(e)n=e.target.db,window.ldb=get:e,set:function(e,t)o.k=e,o.v=t,n.transaction("s","readwrite").objectStore("s").put(o)();

【讨论】：

使用这种方法时，如何获取所有存储的密钥？

@tjespe 就像它在示例中显示的一样 ldb.get('nameGoesHere', function (value) console.log('And the value is', value) );

@Pawel 我得到：无法读取未定义的属性“事务”

非常有用！我只希望它允许列出 IndexedDB 中存在的未知条目。 （类比：Object.keys(localStorage)。）

这真是太棒了

【参考方案3】：

你不能，它是 5MB 的硬连线。这是design decision by the Chrome developers。

在 Chrome 中，Web SQL db 和缓存清单在默认情况下也有下限，但如果您将应用打包为 Chrome 应用商店you can increase them。

另见Managing html5 Offline Storage - Google Chrome。

【讨论】：

5MB UTF16 编码。所以环境有 250 万个字符。

这还是真的吗？！那么本地存储的限制仍然是 5MB 吗？！

@Michael 我也是。这只是愚蠢的。我正在客户端上生成 GIF，并希望将它们存储起来，以免每次都重新生成它们。 IndexedDB 是一种解决方案，但在我的情况下它是一种矫枉过正。 Dexie.js 似乎有帮助，所以我会尝试一下

【参考方案4】：

您不能，但如果您将 JSON 保存在 localStorage 中，您可以使用库来压缩数据，例如：https://github.com/k-yak/JJLC

演示：http://k-yak.github.io/JJLC/

【讨论】：

压缩效果不佳。我尝试了一个 4MB 的 JSON，而 JJLC 只将它减少到原来的 68%。相比之下，gzip 将其降低到 5%。

【参考方案5】：

配额供用户设置，即他希望为每个网站允许多少空间。

因此，由于目的是限制网页，网页不能更改限制。

如果存储空间不足，可以提示用户增加本地存储空间。

要确定存储是否不足，您可以通过保存对象然后删除它来探测本地存储大小。

【讨论】：

是的，那么您，用户如何在chrome中设置配额？

不是关于铬？这个问题是关于 Chrome 的，它在标题、问题中提到，并用 google-chrome 标记。至于提示用户，Chrome 不这样做，并且没有一些机制来更改 javascript 中的配额，甚至没有用户手动方式，编写代码提示用户似乎没什么用。

@Michael，根据 chrome 文档developers.google.com/chrome/whitepapers/storage#managing_quota，如果您要求文件系统存储，它实际上会提示用户。

localStorage 不是通过文件系统 API 访问的，而是通过 window.localStorage 变量访问的。如果超过它，您不会收到提示，您只会收到无声的失败（除非您已经测试/捕获了该条件）。

该页面似乎在记录 localStorage 方面做得并不好，它只是顺便提到了一次，并没有真正明确说明它在哪里适合它的任何模型礼物。 （据我所知，它似乎并不完全适合其中任何一个......）