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