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

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

localStorage

此 API 存入的数据会 永久 保存在浏览器中，除非用户手动删除。

localStorage 能用于同一浏览器同一域名跨标签页通信。

同一浏览器无痕模式和非无痕模式下，localStorage 存储的数据无法互通，且无痕模式存入的数据在浏览器关闭时候会被清除（所有无痕模式窗口关闭也会清除）！！

API

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

// 只读属性，返回本地存储项的数目
localStorage.length

// 获取本地存储的第 n 个键名
localStorage.key(n)
// 获取本地存储的值
localStorage.getItem(key)
// 写入本地存储
localStorage.setItem(key, value)
// 删除本地存储
localStorage.removeItem(key)
// 清空所有本地存储
localStorage.clear()

示例：

(() => {
  // 监听 storage 事件
  window.addEventListener('storage', e => {
    // 本页面不会触发 storage 事件
    // 需要新开一个 tab 查看变化
    console.log(e);
  })

  // 写入数据
  localStorage.setItem('type', '公众号');
  localStorage.setItem('name', '前端路引');

  // 获取本地存储长度
  console.log(localStorage.length);

  // 循环打印本地存储
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log(`${key}: ${value}`);
  }
  // 移除单个本地存储
  localStorage.removeItem('name');
  // 移除所有本地存储
  localStorage.clear();
})()

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

MDN 中有这么一句话：

原文：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

上面代码执行结果：

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

(() => {
  // 移除所有本地存储
  localStorage.clear();

  // 监听 storage 事件
  window.addEventListener('storage', e => {
    console.log(e);
  })

  // 自定义写入函数，封装事件派发
  function setItem (key, value) {
    // 模拟 storage 事件
    const ev = new StorageEvent('storage', {
      key,
      newValue: value,
      oldValue: localStorage.getItem(key),
      url: location.href,
    });
    window.dispatchEvent(ev);
    localStorage.setItem(key, value);
  }
  setItem('type', '公众号');
  setItem('name', '前端路引');
})()

执行结果：

功能检测

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

来源：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

大小与个数限制

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

Chrome

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

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

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

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

错误截图：

Edge

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

Firefox

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

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 会自动优化存储空间，写在本地存储中的数据随时都可能被清空删除，所以本地存储的数据是不可靠的。