javascript的SessionStorage是什么_与LocalStorage有何不同_技术教程

sessionStorage 生命周期仅限当前标签页，关闭即清空；作用域为单个 tab，同源新 tab 或 window.open 的新窗口均创建独立实例，数据不共享。

sessionStorage 是浏览器为当前标签页“专属分配”的临时存储空间，关掉这个标签页，数据立刻消失；localStorage 则是同源下所有标签页共享的“长期保险柜”，不手动删就一直留着。

sessionStorage 的生命周期和作用域怎么理解？

它只属于你当前打开的这一个 tab（或窗口），哪怕你从页面 A 用 window.location.href 跳到页面 B，或者刷新、重载、甚至崩溃后恢复，数据都还在。但只要你关掉这个 tab，sessionStorage 就被清空——连带里面存的 token、表单草稿、筛选条件，全没了。

同一域名下新开一个 tab（哪怕 URL 完全一样），就是全新的 sessionStorage，彼此完全不可见
window.open(url, '_blank') 打开的新窗口，也拥有独立的 sessionStorage，不是继承父窗口的
它不随 HTTP 请求发往服务器，纯前端自用，不会增加网络开销

localStorage 和 sessionStorage 的 API 看似一样，但行为差异在哪？

两者都用 setItem()、getItem()、removeItem()、clear()，但调用结果取决于“谁在调用”和“在哪调用”：

你在 https://example.com/a.html 存了 localStorage.setItem('theme', 'dark')，那么同源下任意其他 tab（比如 /b.html 或新打开的 /c.html）都能立刻读到 'dark'
但如果你存的是 sessionStorage.setItem('draft', 'hello world')，只有当前 tab 能读，换一个 tab 就是 null
两者都只接受字符串值：对象必须先 JSON.stringify()，取出来再 JSON.parse()；直接存 {name: 'Alice'} 会变成 '[object Object]'

该选哪个？看三个关键问题

写代码前快速问自己：

这个数据需要跨标签页共享吗？ → 需要 → 用 localStorage；不需要 → 优先考虑 sessionStorage
这个数据下次打开浏览器还要用吗？ → 要 → localStorage；不要 → sessionStorage 更安全（生命周期短，攻击窗口小）
这个数据是否可能被 XSS 盗取？ → 是（比如 token、用户 ID）→ 即使短期用，也建议配合 HttpOnly cookie + 后端验证，别只靠 sessionStorage 做信任依据

容易踩的坑：你以为在传参，其实只是“自嗨”

常见错误：在列表页存 sessionStorage.setItem('selectedId', '123')，然后跳转到详情页想读取——结果是 null。为什么？因为你用了新 tab 打开（target="_blank"），或者用户手动复制链接新开 tab，那已经是全新会话。

正确做法：

确保跳转是同 tab 内完成（如 location.href = '/detail?id=123' 或 history.pushState）
或改用 URL 参数、localStorage（注意清理时机）、或服务端 session 关联

别忘了加容错：

const id = sessionStorage.getItem('selectedId');
if (!id) {
  console.warn('sessionStorage missing: selectedId');
  // fallback to query param or redirect
}

最常被忽略的一点：sessionStorage 不是“会话级状态同步机制”，它没有跨 tab 通信能力；而 localStorage 虽然能共享，但修改不会触发当前页的 storage 事件——监听得在其他 tab 里写。