localStorage和sessionStorage生命周期与作用域不同：前者同源永久存储，适合用户偏好；后者仅限当前标签页，适合临时数据。二者均只支持字符串，存对象需JSON序列化，且有跨源、私密模式等限制。

localStorage 和 sessionStorage 都能存字符串，但生命周期、作用域和用途完全不同——别直接替换成同一个 API，否则页面刷新后数据就丢了，或者关掉标签页还残留着不该留的数据。

localStorage 适合存长期不变的用户偏好

比如主题色、语言选择、折叠菜单状态。它在同源（协议+域名+端口）下永久存在，除非手动清除或代码删除。

• 写入必须是字符串：localStorage.setItem('theme', 'dark')，对象要先 JSON.stringify()
• 读取后需手动解析：JSON.parse(localStorage.getItem('theme'))
• 不支持跨子域名共享，https://a.example.com 和 https://b.example.com 是两个独立存储空间
• 容量通常为 5–10 MB，但不同浏览器有差异；超出会抛 QuotaExceededError

sessionStorage 只在当前标签页生命周期内有效

关掉这个标签页（不是整个浏览器），所有数据自动清空。适合临时中转数据，比如表单草稿、多步流程中的中间状态。

• 用法和 localStorage 完全一致：sessionStorage.setItem('step', '2')
• 新开一个标签页访问同一页面，sessionStorage 是空的，和原标签页互不影响
• 即使同源，iframe 中的 sessionStorage 也和父页面隔离（除非同源且显式传递）
• 无法被 Service Worker 访问，也不参与 HTTP 请求

别踩这些坑：常见错误现象与修复

这两个 API 看似简单，但实际项目里高频出错：

• 试图存对象不序列化 → 读出来是 [object Object] → 必须用 JSON.stringify() 和 JSON.parse()
• 在 HTTP 页面里调用 HTTPS 域名的 storage → 触发跨源限制，报 SecurityError
• 在私密模式（如 Safari 无痕、Chrome Incognito）下写入失败 → 某些浏览器默认禁用 storage，需加 try/catch
• 监听 storage 事件时，只在**其他标签页**触发，当前页修改不会收到通知

if (typeof localStorage !== 'undefined') {
  try {
    localStorage.setItem('test', 'ok');
  } catch (e) {
    console.warn('localStorage 不可用：', e.name);
  }
} else {
  console.warn('浏览器不支持 localStorage');
}

真正麻烦的不是怎么写，而是什么时候该用哪个——比如登录态 token 绝对不能放 sessionStorage（F5 刷新就登出），但临时上传文件的进度 ID 就不该进 localStorage（关掉页面还占着空间）。边界模糊时，优先选 sessionStorage，再评估是否需要升为 localStorage。