javascript如何操作浏览器存储_localStorage和sessionStorage有什么区别【教程】

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 后立刻触发回调。