localStorage与sessionStorage区别详解

localStorage和sessionStorage是前端常用的两种客户端存储机制，核心区别在于生命周期与作用域：localStorage数据持久保存（关闭浏览器也不丢失），同源下全局共享，适合存储长期配置或用户偏好；而sessionStorage仅在当前标签页有效（关闭tab即清空），完全隔离，适用于临时状态如多步表单或页面跳转参数。二者均只支持字符串存储，存取对象必须配合JSON.stringify/parse，且不参与HTTP请求、无安全防护能力，因此绝不可存放敏感信息。理解它们的存活时间、可见范围、序列化要求及安全边界，是避免静默失败、跨页冲突和XSS风险的关键——用对地方，才能让数据既可靠又可控。

localStorage 和 sessionStorage 的生命周期差异在哪？

关键区别就一条：localStorage 数据关掉浏览器也不丢，sessionStorage 关掉当前标签页就清空。不是“关浏览器”，而是“关那个页面标签”——哪怕你刷新、跳转、开新窗口，只要没关掉这个 tab，sessionStorage 就还在；但新开一个同域名的 tab，它的 sessionStorage 是完全独立的，互不可见。

• localStorage 适合存长期有效的数据：用户主题、记住的搜索词、登录后返回的 token（⚠️注意：不推荐存敏感 token，见下文）
• sessionStorage 适合存临时中转状态：多步表单的第 2 步数据、从列表页传到详情页的 id、防重复提交的标记
• 两者都不发请求、不占带宽，这点和 cookie 本质不同

怎么存对象或数组？为什么直接存会出错？

因为二者只接受字符串——存数字自动转成字符串，存对象却变成 "[object Object]"，取出来就废了。必须手动序列化。

const user = { name: "小明", age: 28 };
// ✅ 正确：存前 JSON.stringify
localStorage.setItem("user", JSON.stringify(user));
// ✅ 正确：取后 JSON.parse
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "小明"

• 如果忘了 JSON.stringify，getItem 返回的永远是 "[object Object]"，不是报错，而是静默失败
• JSON.parse(null) 会报错，所以建议加一层判断：const data = localStorage.getItem("key"); return data ? JSON.parse(data) : null;
• 布尔值、null、undefined 存进去也会被转成字符串，读取时需自行转换类型

跨页面/跨标签页能共享吗？

localStorage 同源（协议+域名+端口）下所有页面都能读写，改一个，其他页面立刻可见；sessionStorage 则严格绑定当前 tab，新开 tab 就是全新沙盒。

• 用 localStorage 做“全局状态同步”要小心：A 页面改了 theme，B 页面不会自动响应——得监听 storage 事件才能感知变化
• sessionStorage 在 iframe 里也独立，父子页面之间不能靠它传数据
• 隐私模式下，Chrome/Safari 会禁用 localStorage，getItem 返回 null，setItem 可能抛 QuotaExceededError

安全与兼容性要注意什么？

别把密码、身份证号、完整 token 往里塞——XSS 攻击能直接读走，毫无防护。

• 现代浏览器基本都支持（IE8+），但用之前仍建议检测：if (!window.localStorage) { /* fallback */ }
• 容量约 5MB，但实际因浏览器而异；存太多大对象会拖慢页面，尤其低端设备
• localStorage.clear() 是全站清除，不是当前页面——上线前务必确认是否影响其他模块
• 服务端无法访问它们，所以不要指望用它替代 session 或 cookie 认证逻辑

最常被忽略的一点：你以为存了个对象，其实只存了一串字符串；你以为关了浏览器数据就没了，结果 localStorage 还在那儿等着你下次打开——用之前，先想清楚“它到底活多久”“谁能看到它”“它是不是真该放这儿”。

到这里，我们也就讲完了《localStorage与sessionStorage区别详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！