核心区别在于生命周期和作用域：sessionStorage 仅限当前标签页会话，关闭即清空；localStorage 持久保存，需手动清除。两者均只支持字符串值，存对象须 JSON.stringify()，取时需 JSON.parse()。
sessionStorage 和 localStorage 的核心区别在哪
根本差异在生命周期和作用域：sessionStorage 只在当前浏览器标签页（tab）的会话期间有效，关闭该 tab 就清空；localStorage 没有自动过期机制，数据会一直留在浏览器里，除非手动调用 localStorage.removeItem() 或 localStorage.clear()，或用户主动清除站点数据。
两者都只支持字符串作为值——哪怕你存 {name: "Alice"}，实际调用 setItem() 时也必须先 JSON.stringify()，读取时再 JSON.parse()。这点容易被忽略，直接存对象会导致变成 "[object Object]"。
什么时候该用 sessionStorage
适合临时、单次会话内需要跨页面传递但不希望“污染”长期存储的数据。典型场景包括：
- 表单草稿：用户在多步表单中跳转，每步把当前数据存到
sessionStorage，关掉标签就自动丢弃，避免残留脏数据 - 登录态临时透传：从 OAuth 回调页跳转到首页时，把临时 token 存
sessionStorage，防止刷新后丢失，又不会像 localStorage 那样长期留存带来安全风险 - 页面间简单状态传递：比如搜索页 → 结果页，把关键词和筛选条件存
sessionStorage，用户新开一个标签访问结果页则拿不到——这反而是预期行为
注意：sessionStorage 不共享于同源下的不同 tab，哪怕 URL 完全一样，新开 tab 也会拿到全新的、空的 sessionStorage 实例。
立即学习“前端免费学习笔记（深入）”；
什么时候该用 localStorage
适合需要持久化、跨会话保留的用户偏好或轻量业务数据，例如：
- 主题切换设置（dark/light mode），用户下次打开网站仍生效
- 已读文章标记、折叠面板展开状态等 UI 状态缓存
- 离线优先应用中的待同步数据队列（需配合 service worker 和冲突处理）
风险点：localStorage 是同步阻塞 API，大量读写（如存 >5MB 数据或频繁 setItem）会卡主线程；且所有同源页面共享同一份 storage，多个 tab 同时写入可能触发 storage 事件竞争，需用 window.addEventListener('storage', handler) 做响应式更新，但注意：该事件**不会**在触发修改的当前页面触发，只通知其他同源 tab。
兼容性和替代方案提醒
两者都支持 IE8+ 和所有现代浏览器，但 Safari 在无痕模式下会拒绝写入 localStorage/sessionStorage，并抛出 QuotaExceededError。建议操作前加 try/catch：
try {
localStorage.setItem('key', 'value');
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.warn('Storage quota exceeded');
}
}
如果需要存更多数据、支持二进制或异步读写，别硬扛，该上 IndexedDB；如果只是临时传参，有时 URL query string 或 history.state 更轻量、更可控。别把 sessionStorage 当成“前端 session”，它不防篡改，也不加密，敏感信息（如 token）不该长期存在 localStorage，短期用 sessionStorage 也要配合后端时效校验。
