javascript如何存储数据_localstorage和sessionstorage有何区别【教程】

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 也不是内存变量，它们只是两个有严格边界的本地抽屉，拿错抽屉，东西就找不到了。