设置"dataURL"的值超出了配额限制。

Question

我有一段JavaScript代码，它可以将字符串保存到本地存储中，这个字符串的大小是400000。

var dataURL = canvas.toDataURL("image/jpg").toString();
localStorage.setItem("dataURL", dataURL);

我在Chrome中打开HTML文件，在一台电脑上没问题，在另一台电脑上出现以下错误：

Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'dataURL' exceeded the quota.

在这台电脑上，我只允许保存不超过100000个字符的字符串。两台电脑都使用相同版本的Chrome（35.0.1916.114 m），为什么会出现这种情况呢？

- Ortal Blumenfeld Lagziel

---

可能是浏览器中设置的偏好，每台计算机上可用的磁盘空间或其他环境差异。 - jfriend00

相关问题：https://dev59.com/s3A75IYBdhLWcg3w_umD - jfriend00

尝试这个：尝试 { 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); } } 赶上 (e) { debugger console.log("本地存储已满，请清空数据"); // 当localstorage满时触发 // 您可以在此处处理错误或清空本地存储 } - jinal

问题可能是由于在事件循环中创建localStorage和调用API时的时间不当造成的。首先，需要创建localStorage并尝试访问localStroge，然后再进行API调用。 - Shah Vipul

Answer 1

当您的浏览器达到最大限制时，它会抛出此错误 Failed to execute 'setItem' on 'Storage': Setting the value of '' exceeded the quota.

• 您可以按照以下方式处理

 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 or empty the local storage
 }

- jinal

Answer 2

这种类型的错误也可能由以下原因引起：

在单个localStorage键中存储值的上限是有限的。

例如，如果我写入localStorage.setItem('data'，allData)； 那么'data'键中可以存储指定数量的字符，用来存储'allData'值。

在Chrome和Firefox中，您可以在单个键中存储高达5200000个字符。您可以通过访问此网站https://arty.name/localstorage.html来检查浏览器限制。

因此，要解决此问题，您必须检查尝试在单个键中存储的字符数。

如果超过了localStorage键的值大小，则必须将其大小减小到适当的限制。

- user7425786

Answer 3

使用localStorage.clear();清除本地存储对我有用。

如果您使用的是Firefox浏览器，则可能需要使用window.localStorage.clear();

- Diego Fortes

Answer 4

Chrome本地存储的默认大小为25M，因此清除Chrome本地存储会起作用。祝好运！

- Willie Zou

---

根据What is the max size of localStorage values?的说法，你是错误的。 - erikvimz

不行。自 Chrome 104 起，它是 5,200,000 字节。 - avalanche1

Answer 5

这取决于浏览器的偏好和磁盘空间。在此处比较您两台计算机的浏览器 https://arty.name/localstorage.html 并检查它们是否存储了相同数量的字符。您将看到差异。

- computnik

---

你说的是正确的，但我给出了一个链接作为答案，这个链接可能会证明我试图解释的内容。我不认为我们可以在这里运行代码片段来得到那些结果。或者也许有其他方法可以做到这一点吗？ - computnik

Answer 6

以下代码将允许您在本地存储中保存最多的数据，而不会在存储超过限制时清除它。

const setInLocalStorage = (keyName, value) => {
  try {
      localStorage.setItem(keyName, JSON.stringify(value));
  } catch (error) {
      console.log('Error in local storage', error);
      setInLocalStorage(keyName, JSON.parse(localStorage.getItem(keyName)));
  }
};

- Shamli Kiruba