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。
