核心区别在于数据生命周期和作用域：localStorage永久存储、同源标签页共享；sessionStorage仅当前标签页有效、关闭即清空。两者API相同，但选错会导致刷新丢数据或跨标签页状态混乱。
核心区别不在 API 写法，而在数据“活多久”和“被谁看见”——选错一个，轻则刷新丢数据，重则跨标签页状态混乱。
生命周期：关不关标签页，决定数据存亡
localStorage 的数据会一直留在浏览器里，哪怕你关掉浏览器、重启电脑，它还在。除非手动调用 localStorage.clear() 或 localStorage.removeItem()，或者用户在设置里清空站点数据。
sessionStorage 只绑定当前标签页。关闭这个 tab，数据立刻消失；刷新页面、页面崩溃后恢复、前进后退，数据都保留。但右键“在新标签页中打开”，新页的 sessionStorage 是空的，跟原页完全无关。
作用域：能不能被其他页面“看到”
localStorage 在同一域名（协议+域名+端口）下的所有标签页、窗口间共享。你在 A 标签页改了主题设置，B 标签页能立刻感知（通过监听 storage 事件），适合全局一致的状态。
立即学习“前端免费学习笔记（深入）”；
sessionStorage 完全隔离。同源下每个标签页都有自己的独立副本，互不可见、互不干扰。这反而保证了多开页面时不会互相覆盖临时数据。
都只能存字符串，对象得自己转
两者都不支持直接存对象或数组。写进去前必须 JSON.stringify()，读出来后必须 JSON.parse()。否则存个 {name: "Alice"}，取出来就是 "[object Object]"，彻底失效。
注意解析失败会报错，建议加上 try-catch：
try { const data = JSON.parse(localStorage.getItem('config')); } catch (e) { console.warn('解析失败', e); }
典型使用场景怎么选
用 sessionStorage 的情况：
- 多步表单中间步骤：用户填到第二步跳转，数据暂存，关掉页面就自动清理，不留脏数据
- 搜索页 → 结果页传参：关键词、筛选条件只在这次浏览中有效，新开标签不应复用
- OAuth 回调后临时存 token：防止跳转过程刷新丢失，又避免长期留在 localStorage 带来安全风险
用 localStorage 的情况：
- 用户主题偏好（暗色/亮色）、语言选择：下次打开网站仍生效
- 已读文章标记、折叠面板展开状态：UI 体验的连续性依赖持久记忆
- 离线内容缓存或待同步队列：配合 Service Worker 实现离线优先逻辑
