localStorage和sessionStorage需按数据生命周期与可见范围严格选用：前者持久同源共享，后者仅限单标签页会话；存对象必用JSON.stringify/parse，禁存敏感信息，storage事件仅响应其他窗口变更。
localStorage 和 sessionStorage 不是“选一个就行”，而是“用错一个，数据就丢或错乱”——关键看数据要活多久、被谁看到。
怎么存对象？必须手动序列化
两者都只接受字符串，setItem() 会自动把非字符串值转成 [object Object]，读出来就是废数据。
- 存对象前一定要用
JSON.stringify()，比如：localStorage.setItem('user', JSON.stringify({ id: 1, name: 'Alice' })); - 取的时候必须用
JSON.parse()，且要加try...catch防止损坏的 JSON 崩溃：const user = JSON.parse(localStorage.getItem('user') || '{}'); - 存
null或undefined会被转成字符串"null"或"undefined"，读取时不会自动还原，需自己判断
什么时候该用 localStorage？记住这三点
它适合「用户明确希望下次打开还在」的数据，但不是所有长期数据都该放这儿。
- ✅ 合适场景：主题偏好（
theme）、语言设置（lang）、折叠面板状态、搜索历史（非敏感） - ❌ 禁止场景：明文 token、密码、身份证号——任何同源脚本都能读写，XSS 一打一个准
- ⚠️ 注意隔离：不同协议/端口/子域互不可见，
https://app.example.com和https://api.example.com是两套独立的localStorage
sessionStorage 的“会话”到底指什么？
它的生命周期绑定在「单个标签页」上，不是“一次登录”也不是“一次页面访问”，这点最容易误解。
立即学习“Java免费学习笔记（深入）”；
- ✅ 刷新页面、前进后退、跳转同域其他页面 → 数据保留
- ❌ 关闭该标签页 → 数据立刻销毁（不等 JS 执行完）
- ❌ 新开一个相同 URL 的标签页 → 是全新
sessionStorage，和之前完全无关 - ? 典型用途：多步表单中间态（
formStep）、OAuth 回调参数暂存、防重复提交标记（submitLock）
监听变化？storage 事件只对“别人”生效
你在当前窗口改了 localStorage，storage 事件根本不会触发——它只在其他同源窗口修改时通知你。
- ✅ 可用于跨标签通信：A 标签页登出，调用
localStorage.removeItem('token')，B 标签页监听到事件后自动跳转登录页 - ❌ 不能用来响应本窗口数据更新：想实时更新 UI？得自己维护状态变量，别依赖 storage 事件
- ? 检查是否可用：有些隐私模式或禁用存储的浏览器会抛错，建议先兜底：
if (typeof localStorage !== 'undefined') { /* 安全使用 */ }
真正麻烦的从来不是 API 多难记，而是没想清楚“这个数据到底该不该存在前端”——localStorage 不是数据库，sessionStorage 也不是内存变量，它们只是两个有严格边界的本地抽屉，拿错抽屉，东西就找不到了。
