localStorage数据永久保存(关浏览器不丢失),sessionStorage仅限当前标签页(关tab即清空);二者均只支持字符串,存对象需JSON.stringify,取时需JSON.parse;同源下localStorage全局共享,sessionStorage隔离;均不参与HTTP请求。

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 攻击能直接读走,毫无防护。
立即学习“Java免费学习笔记(深入)”;
- 现代浏览器基本都支持(IE8+),但用之前仍建议检测:
if (!window.localStorage) { /* fallback */ } - 容量约 5MB,但实际因浏览器而异;存太多大对象会拖慢页面,尤其低端设备
-
localStorage.clear()是全站清除,不是当前页面——上线前务必确认是否影响其他模块 - 服务端无法访问它们,所以不要指望用它替代 session 或 cookie 认证逻辑
最常被忽略的一点:你以为存了个对象,其实只存了一串字符串;你以为关了浏览器数据就没了,结果 localStorage 还在那儿等着你下次打开——用之前,先想清楚“它到底活多久”“谁能看到它”“它是不是真该放这儿”。











