17370845950

localStorage 数据持久保存，关闭浏览器或电脑后仍存在；sessionStorage 仅在当前标签页有效，关闭标签页即清除。

localStorage 和 sessionStorage 的生命周期差在哪？

关键就一句话：localStorage 关浏览器、关电脑、隔一周再打开，数据还在；sessionStorage 只认当前标签页——关掉这个标签页，数据立刻清空，哪怕只是刷新或跳个路由，它都稳如老狗。

常见错误现象：

• 把登录 token 存进 sessionStorage → F5 刷新后 401，用户当场懵圈
• 用 localStorage 存表单草稿 → 用户填完关掉页面，三天后回来发现草稿还在，占着空间还可能和新数据冲突

所以选哪个，不是看“能不能存”，而是看“该活多久”。

作用域和共享范围怎么判断？

两者都严格遵循同源策略（协议 + 域名 + 端口三者完全一致），但共享粒度不同：

• localStorage：整个域名下所有同源页面共用一份，比如 https://a.example.com/page1 和 https://a.example.com/page2 能互相读写
• sessionStorage：连同源都不行——新开一个标签页访问同一 URL，sessionStorage 就是空的；iframe 里即使同源，默认也不共享，得手动传参

实操建议：

• 调试时别只在一个标签页试 —— 想验证 localStorage 共享，开两个 tab；想确认 sessionStorage 隔离，新开 tab 后直接 sessionStorage.getItem('x')，应该返回 null
• 私密模式（如 Safari 无痕、Chrome Incognito）下，部分浏览器会禁用 storage 写入，务必加 try/catch

存对象、取对象为什么总得到 [object Object]？

因为这两个 API 只接受字符串作为值。传对象不处理，就会自动调用 .toString()，结果就是那个让人抓狂的字符串。

正确做法始终两步走：

• 存之前：JSON.stringify(obj)
• 取之后：JSON.parse(localStorage.getItem('key'))

示例：

const user = { name: 'Alice', theme: 'dark' };
localStorage.setItem('user', JSON.stringify(user));
// ✅ 读取
const saved = JSON.parse(lo
calStorage.getItem('user'));
console.log(saved.name); // 'Alice'

注意：如果 getItem 返回 null，JSON.parse(null) 会报错，建议加空值判断。

浏览器里怎么查、改、删这些数据？

打开开发者工具（F12 或右键「检查」）→ 切到「Application」选项卡 → 左侧展开「Storage」→ 点 localStorage 或 sessionStorage 即可查看、双击编辑、右键删除。

几个容易被忽略的点：

• storage 事件只在**其他同源标签页**中触发，当前页改了不会通知自己 —— 别指望靠它做本地状态同步
• 没有原生过期机制，想实现“7天后自动失效”，必须自己封装，存的时候记时间戳，读的时候比对
• 容量通常 5–10 MB，但超出会抛 QuotaExceededError，尤其存大量 base64 图片时要小心

真正麻烦的从来不是语法，而是想清楚：这数据到底该活几小时，还是该活一辈子。