localStorage和sessionStorage均只支持字符串存储,需用JSON.stringify/parse处理对象;sessionStorage在同标签页刷新后保留但关tab即清空;二者均受同源策略严格限制且不自动发送至服务器。

localStorage 和 sessionStorage 都能存字符串,但生命周期、作用域和触发时机完全不同——选错一个,就可能造成用户登录态丢失或缓存污染。
localStorage.setItem() 为什么存不进去?
最常见原因是值不是字符串。这两个 API 只接受 string 类型,传对象会自动转成 [object Object],取出来无法还原。
- 必须手动序列化:
localStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'})) - 读取时反序列化:
JSON.parse(localStorage.getItem('user')) - 如果值是
undefined或null,setItem不报错但实际不写入(Chrome 中表现为静默失败) - 超出浏览器配额(通常 5–10MB)会抛
QuotaExceededError,需用try/catch捕获
sessionStorage 在页面刷新后数据还在吗?
在同一个 tab 内刷新、前进/后退、甚至执行 location.reload(),sessionStorage 的数据都保留。但它只绑定到「当前浏览会话」,关掉 tab 就清空——不是关浏览器,是关那个标签页。
- 新开 tab 或从链接打开新页:
sessionStorage是空的,即使 URL 完全一样 - iframe 里访问父页的
sessionStorage:跨域会失败;同域下也受限于 iframe 的独立上下文,不能直接共享 - SPA 路由切换(如 Vue Router / React Router)不影响
sessionStorage,它跟 URL 路径无关
localStorage 和 sessionStorage 的作用域规则
两者都遵循「同源策略」,但比 cookie 更严格:协议、域名、端口三者必须完全一致。localhost:3000 和 localhost:8080 互不可见,http 和 https 也不互通。
立即学习“Java免费学习笔记(深入)”;
- 子域名之间不共享:
admin.example.com存的数据,api.example.com读不到 - localStorage 数据不会随请求发给服务器,和 cookie 本质不同;别指望它替代认证 token 传输
- 隐私模式(无痕窗口)下,每次启动都是全新存储空间,关闭即销毁
- 部分 iOS Safari 在某些版本中,当页面被后台冻结时,
localStorage读写可能异常,建议加try/catch并降级到内存缓存
真正容易被忽略的是事件监听机制:storage 事件只在「其他 tab 或 window」修改同源 storage 时触发,当前页面改完自己不会收到。如果要做多标签页状态同步,得靠这个事件 + 自己实现广播逻辑,而不是幻想 setItem 后立刻触发回调。











