localStorage持久存储且跨标签页共享，sessionStorage仅限当前标签页会话；二者均只支持字符串，存对象需JSON序列化，storage事件仅在其他同源窗口触发。
localStorage 和 sessionStorage 用法差异在哪
两者都提供键值对存储，但生命周期和作用域不同：localStorage 持久保存，关闭标签页也不丢；sessionStorage 只在当前会话（即同源的单个标签页）有效，刷新不丢，关掉就清空。
常见误用是把登录态存在 sessionStorage 里却期望跨标签页共享——它不共享，连同源的另一个标签页都读不到。
-
localStorage.setItem('token', 'abc123')写入字符串，非字符串会自动转成字符串（比如localStorage.setItem('count', 42)存进去其实是"42"） - 读取统一用
localStorage.getItem('key')，返回null表示键不存在，不是undefined - 删除用
localStorage.removeItem('key')，清空全部用localStorage.clear()
存对象必须手动序列化
本地存储只支持字符串，直接 localStorage.setItem('user', {name: 'Alice'}) 会存成 "[object Object]"，取出来完全不可用。
正确做法是配合 JSON.stringify() 和 JSON.parse()：
立即学习“前端免费学习笔记（深入）”；
【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键
const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
// 读取时
const saved = localStorage.getItem('user');
const parsed = saved ? JSON.parse(saved) : null;
注意：函数、undefined、Symbol、Date 对象、RegExp 等无法被 JSON.stringify() 正常序列化，存之前得自行处理或换方案。
storage 事件监听只在其他窗口触发
window.addEventListener('storage', handler) 不会在当前写入的窗口触发，只响应**同源下其他窗口/标签页**对 localStorage 的修改。这是常被忽略的设计限制。
- 适合做跨标签页状态同步（比如 A 标签页登出，B 标签页收到 storage 事件后自动跳转）
- 不能用于“刚 setItem 就立刻响应”，要监听得另加逻辑（比如封装一个带回调的 set 方法）
- 事件对象的
event.key、event.oldValue、event.newValue可用，但event.url是触发变更的页面地址，event.storageArea是对应的localStorage或sessionStorage
容量限制与错误处理不能靠 try-catch 完全兜底
主流浏览器对 localStorage 单域名限制约 5–10MB，但实际能写入多少受编码、Unicode、浏览器实现影响。超出时抛 QuotaExceededError，但部分旧版 Safari 在满时静默失败，不报错。
- 写入前可先粗略估算：
JSON.stringify(data).length（单位是字节），留 20% 余量 - 捕获异常推荐用
try { localStorage.setItem(...) } catch (e) { if (e.name === 'QuotaExceededError') {...} } - 敏感数据别存本地存储——它没访问控制，XSS 攻击可直接读取；token 类信息优先走 httpOnly cookie
真正难处理的是 Unicode 字符（如 emoji）在不同浏览器中占的字节数不一致，一个 ? 在 UTF-16 下是 2 个字符，在 UTF-8 存储时可能占 4 字节，但 .length 返回的是码元数而非字节数——这点在做精确容量预估时容易翻车。
