Web前端入门第 83 问：JavaScript localStorage 有大小限制吗？溢出会怎样？

本地存储除了 Cookie 外，还有 localStorage 和 sessionStorage，本文一探 localStorage。
localStorage

此 API 存入的数据会 永久 保存在浏览器中，除非用户手动删除。
localStorage 能用于同一浏览器同一域名跨标签页通信。
同一浏览器无痕模式和非无痕模式下，localStorage 存储的数据无法互通，且无痕模式存入的数据在浏览器关闭时候会被清除（所有无痕模式窗口关闭也会清除）！！
API

localStorage 对象暴露的 API 很简单，就几个增删改操作方法：

1. // 只读属性，返回本地存储项的数目
2. localStorage.length
4. // 获取本地存储的第 n 个键名
5. localStorage.key(n)
6. // 获取本地存储的值
7. localStorage.getItem(key)
8. // 写入本地存储
9. localStorage.setItem(key, value)
10. // 删除本地存储
11. localStorage.removeItem(key)
12. // 清空所有本地存储
13. localStorage.clear()

复制代码

示例：

1. (() => {
2.   // 监听 storage 事件
3.   window.addEventListener('storage', e => {
4.     // 本页面不会触发 storage 事件
5.     // 需要新开一个 tab 查看变化
6.     console.log(e);
7.   })
9.   // 写入数据
10.   localStorage.setItem('type', '公众号');
11.   localStorage.setItem('name', '前端路引');
13.   // 获取本地存储长度
14.   console.log(localStorage.length);
16.   // 循环打印本地存储
17.   for (let i = 0; i < localStorage.length; i++) {
18.     const key = localStorage.key(i);
19.     const value = localStorage.getItem(key);
20.     console.log(`${key}: ${value}`);
21.   }
22.   // 移除单个本地存储
23.   localStorage.removeItem('name');
24.   // 移除所有本地存储
25.   localStorage.clear();
26. })()

复制代码

以上代码中的 storage 事件只会在有多个标签页打开的情况下，才会触发；只有一个窗口时， localStorage 的改变并不会触发 storage 事件。
MDN 中有这么一句话：

原文：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
上面代码执行结果：

如果要想在当前页页能触发 storage 事件，可以派发一个模拟事件：

1. (() => {
2.   // 移除所有本地存储
3.   localStorage.clear();
5.   // 监听 storage 事件
6.   window.addEventListener('storage', e => {
7.     console.log(e);
8.   })
10.   // 自定义写入函数，封装事件派发
11.   function setItem (key, value) {
12.     // 模拟 storage 事件
13.     const ev = new StorageEvent('storage', {
14.       key,
15.       newValue: value,
16.       oldValue: localStorage.getItem(key),
17.       url: location.href,
18.     });
19.     window.dispatchEvent(ev);
20.     localStorage.setItem(key, value);
21.   }
22.   setItem('type', '公众号');
23.   setItem('name', '前端路引');
24. })()

复制代码

执行结果：

功能检测

此处分享一个 MDN 文档中的检测 localStorage 是否可用的代码片段：

来源：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
大小与个数限制

分享完 API 的使用方式，再看看各个浏览器之间的大小限制。
Chrome

Chrome 浏览器本地存储配额为 5MB 大小，意思就是所有存储的数据（键和值一起的长度）加起来不能超过 5MB。

1. (() => {
2.   // 移除所有本地存储
3.   localStorage.clear();
4.   const key = 'name';
5.   const max = 5 * 1024 * 1024;
6.   // 测试极限值
7.   const value = 'a'.repeat(max - key.length);
8.   // 测试中文
9.   // const value = '中'.repeat(max - key.length);
10.   // 测试溢出
11.   // const value = 'a'.repeat(max - key.length + 1);
12.   localStorage.setItem(key, value);
13. })()

复制代码

以上代码为刚好能存下的长度，如果超出一个字符，将会报错：

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

复制代码

错误截图：

Edge

自从 Edge 换成 Chromium 内核之后，它俩的所有行为基本表现一直，以前的 IE 内核没做测试，有兴趣的同学可以测试看看 IE 内核的表现行为。
Firefox

Firefox 也是限制 5MB 大小，但在溢出时的报错不一样：

1. Uncaught DOMException: The quota has been exceeded.

复制代码

错误截图：

根据以上测试结果得出：Firefox（138.0.4）、Edge（136.0.3240.92）、Chrome（136.0.7103.114）三大浏览器都是共用 5MB 存储空间，数量与每个本地储存项的大小有关，比如每次写入一个 1MB 的数据，那么就支持写入 5 个！！
中英文：与 Cookie 不同，localStorage 中的中文和英文计算方式一致，一个中文也按照一个字符计算！！
写在最后

localStorage 仅支持字符串存储，所以在存储 JS 的 JSON 数据时，需要将 JSON 数据转为字符串再存储。
由于本人是 windows 环境，所以无法测试 Safari 浏览器的具体情况，有兴趣可以自测一下（有网友测试 safari 13.0.2 限制 2.5MB）。
在移动端的浏览器和 Webview 中使用 localStorage 时需注意，由于 APP 会自动优化存储空间，写在本地存储中的数据随时都可能被清空删除，所以本地存储的数据是不可靠的。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！