JavaScript本地存储核心是localStorage和sessionStorage:前者长期保存、后者标签页关闭即清空;均需JSON序列化对象,受同源策略限制,注意隐私模式、容量超限及不可序列化值导致的静默失败。

JavaScript 操作浏览器本地存储,核心就两条路:localStorage 和 sessionStorage,它们都提供简单的键值对存取能力,但生命周期和作用域完全不同——选错一个,数据可能刷一下就没了,或者该清的时候死活不清。
localStorage.setItem() 和 sessionStorage.setItem() 怎么用?
两者 API 完全一致,区别只在存储策略。调用前必须确保值是字符串;传入对象或数组会自动转成 [object Object] 或 1,2,3,后续取出来没法直接用。
- 存对象必须先
JSON.stringify():localStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'})) - 取的时候记得
JSON.parse(),否则拿到的是字符串:JSON.parse(localStorage.getItem('user')) -
sessionStorage的数据在标签页关闭后立即清空,新开同源标签页也不共享;localStorage则长期存在,除非手动清除或用户主动删除站点数据 - 二者都受同源策略限制:协议、域名、端口完全一致才能读写,
https://a.com和http://a.com是不同源
存不进去?检查这三类常见错误
不是代码写错,而是环境或值本身触发了静默失败:
- 浏览器隐私模式下(如 Safari 无痕、Chrome Incognito),部分版本会直接禁用
localStorage,调用setItem抛出QuotaExceededError或直接忽略——建议加try/catch包裹 - 值过大:虽然规范没定上限,但 Chrome 约 10MB,Firefox 约 5MB,实际超过 5–6MB 就容易出问题;单个 key 超过 2MB 在某些 iOS 版本会卡死
- 存
undefined、null、函数、DOM 节点等非可序列化值,JSON.stringify()会丢掉它们(undefined变成null,函数直接消失),取出来再解析就失真
如何安全地批量读写或监听变化?
localStorage 支持 storage 事件,但注意它只在「其他同源窗口」中触发,当前窗口改了不会收到自己的通知。
立即学习“Java免费学习笔记(深入)”;
- 监听示例:
window.addEventListener('storage', (e) => console.log(e.key, e.newValue)) - 批量操作别手写循环,用
Object.keys(localStorage).forEach(...)可遍历所有 key,但无法保证顺序,且不包含被delete后又复用的 key(因为底层是哈希表) - 需要同步多个 tab 的状态?别只靠
storage事件——它不保序、不重试、不反馈失败。复杂场景建议搭配BroadcastChannel或内存缓存 + 定时轮询 - 清空全部?
localStorage.clear()最快,但会误杀其他功能依赖的数据;更稳妥的是按前缀遍历删除:Object.keys(localStorage).filter(k => k.startsWith('myapp_')).forEach(k => localStorage.removeItem(k))
真正麻烦的从来不是怎么存,而是什么时候该删、谁来负责清理、以及用户换了设备之后那套“本地”逻辑还成不成立——这些都不是 setItem 能回答的问题。











