JavaScript中sessionStorage是什么？它与localStorage有何区别？

一分耕耘，一分收获！既然打开了这篇文章《JavaScript中sessionStorage是什么？它与localStorage有何区别？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

sessionStorage是浏览器原生提供的、仅在当前标签页会话生命周期内有效的前端键值对存储机制，关闭标签页即确定性清除，不与服务器通信，仅存字符串，且同域名下各标签页间完全隔离。

sessionStorage 是什么？一句话说清

sessionStorage 是浏览器原生提供的、仅在**当前标签页会话生命周期内有效**的前端键值对存储机制。它不发请求、不传服务器，只存字符串，关掉这个标签页，数据立刻消失——不是“可能”，是确定性清除。

和 localStorage 最关键的 3 个差异点

别被名字迷惑，sessionStorage 和 localStorage API 完全一样，但行为天差地别：

• 生命周期不同：sessionStorage 关闭标签页即清空；localStorage 不手动删就一直留着，哪怕重启电脑
• 作用域隔离更严格：同域名下，10 个标签页就有 10 份独立的 sessionStorage；而所有标签页共享同一份 localStorage
• 适用场景本质相反：前者适合“用完即焚”的临时状态（比如表单草稿、跳转参数）；后者适合“下次打开还想看见”的用户偏好（比如主题色、token）

常见误用：为什么 sessionStorage.getItem('xxx') 总是 null？

这不是代码写错了，而是你踩进了作用域陷阱：

• 在标签页 A 中执行了 sessionStorage.setItem('user', 'alice')
• 然后新开一个同源标签页 B，再执行 sessionStorage.getItem('user') → 返回 null
• 甚至页面内用 window.open() 打开的新窗口，也拿不到原页的 sessionStorage
• iframe 同源时可以共享，但普通跨标签页通信必须换方案（如 postMessage + localStorage 触发事件）

怎么安全地存对象？别漏这一步

sessionStorage 和 localStorage 都只能存字符串，直接 setItem('cart', { items: [] }) 会变成 "[object Object]" —— 看似存进去了，取出来就是废的。

const cart = { items: ['apple', 'banana'] };
// ✅ 正确：序列化后再存
sessionStorage.setItem('cart', JSON.stringify(cart));

// ✅ 正确：取出来后反序列化，且加 try-catch 防解析失败
try {
  const savedCart = JSON.parse(sessionStorage.getItem('cart'));
} catch (e) {
  console.error('sessionStorage 数据损坏或非 JSON 格式');
}

注意：别存密码、敏感 token 或未加密的用户身份信息——它们在开发者工具里明文可见，sessionStorage 并不比 localStorage 更安全。

最常被忽略的一点：sessionStorage 的“会话”指的只是浏览器标签页，不是 HTTP Session，也不和后端 session ID 绑定。它纯属前端自留地，关掉就清零，没商量余地。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。