localStorage默认持久化，但需避免无痕模式、跨协议访问、未序列化对象、重复覆盖等误用；存取对象须用JSON.stringify/parse并try-catch；storage事件不触发当前页；容量受限且因编码差异实际可用空间不同。
localStorage 本身就能持久化，但有前提条件
localStorage 不是“需要额外操作才能持久化”，它默认就是持久存储——只要用户没手动清除、没启用无痕模式、没用脚本调用 localStorage.clear() 或 localStorage.removeItem()，数据就会一直留在浏览器里，关机重启也不丢。
真正导致“存不住”的，几乎全是开发侧误用或环境限制：
- 在 Chrome 无痕窗口、Firefox 私密窗口中写入，关闭窗口即清空
- 把对象直接赋值给
localStorage.setItem('key', obj)—— 这会自动转成[object Object]，取出来是废字符串 - 在 HTTP 页面里尝试读取 HTTPS 域名下存的 localStorage（跨协议隔离）
- 单页应用路由切换时，误在
useEffect或mounted里反复覆盖同个 key，逻辑上“覆盖”了旧数据
存对象必须 JSON 序列化，取回要 try-catch 解析
localStorage 只接受字符串作为 value。直接塞对象、数组、日期、函数都会被 toString()，结果不可逆。
正确做法是显式用 JSON.stringify() 存，用 JSON.parse() 取，并始终包裹 try...catch —— 因为用户可能手动编辑过 localStorage 里的值，导致 JSON 格式损坏。
立即学习“Java免费学习笔记（深入）”；
const saveUser = (user) => {
try {
localStorage.setItem('user', JSON.stringify(user));
} catch (e) {
console.error('localStorage write failed:', e);
}
};
const loadUser = () => {
try {
const str = localStorage.getItem('user');
return str ? JSON.parse(str) : null;
} catch (e) {
console.warn('localStorage parse failed, returning null');
return null;
}
};
注意 StorageEvent 监听只在其他 tab 触发
storage 事件不会在当前写入的标签页触发，只通知同源下的其他打开的页面。这是规范行为，不是 bug。
如果你在 A 页面调用 localStorage.setItem('theme', 'dark')，想让 A 页面自己立刻响应，不能依赖 storage 事件监听 —— 得同步更新本地状态，再手动触发 UI 更新。
典型误用场景：
- 在 Vue 的
watch或 React 的useEffect里只监听storage事件，却忘了当前页修改后也要同步 state - 以为
storage事件能替代状态管理，结果发现“自己改了没反应”
容量限制和字符编码会影响实际可用空间
虽然常说 localStorage 是 5MB，但这是**字符串 UTF-16 编码长度**的近似上限（Chrome 约 5.2MB，Safari 约 2.5MB，Firefox 更宽松但仍有硬限）。一个中文字符占 2 字节，Base64 字符串体积膨胀约 33%，存大图片 data URL 容易超限。
检查是否写入失败的可靠方式是捕获异常，而不是靠 localStorage.length 判断：
try {
localStorage.setItem('bigData', hugeString);
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.error('localStorage quota exceeded');
}
}
真正需要持久化大量结构化数据时，localStorage 不是合适选择 —— 考虑 IndexedDB 或服务端落库。localStorage 适合存 token、主题偏好、表单草稿这类轻量、键值明确、且能容忍丢失的用户状态。
