localStorage需手动序列化/反序列化对象,用JSON.stringify()存、JSON.parse()取并捕获SyntaxError;sessionStorage仅当前标签页有效,关闭即销毁;二者均不参与HTTP请求,localStorage同源共享且持久,sessionStorage隔离且临时。

localStorage 和 sessionStorage 都能存字符串,但生命周期、作用域和用途完全不同——别用错,否则数据会莫名其妙消失或跨标签泄露。
怎么安全地存取 localStorage?
localStorage 只接受字符串,直接存对象会变成 [object Object];必须手动序列化和反序列化。
- 存:用
JSON.stringify()转对象为字符串,再传给localStorage.setItem() - 取:先用
localStorage.getItem()拿字符串,再用JSON.parse()还原(注意捕获SyntaxError) - 删单个:用
localStorage.removeItem();清空全部:用localStorage.clear()
localStorage.setItem('user', JSON.stringify({id: 123, name: 'Alice'}));
const user = JSON.parse(localStorage.getItem('user') || '{}');
sessionStorage 和 localStorage 的关键区别在哪?
两者 API 完全一致,但行为差异直接影响功能设计:
-
localStorage:数据永久保存(除非手动清除),同源下所有标签页、窗口共享 -
sessionStorage:仅当前标签页有效,关闭该标签页即销毁;即使同源,新开标签页也拿不到之前的数据 - 二者都不参与 HTTP 请求,不被服务端读取,也不随请求自动发送
比如表单草稿适合用 sessionStorage(关掉页面就丢,不污染长期存储);用户偏好设置更适合 localStorage。
立即学习“Java免费学习笔记(深入)”;
为什么有时 getItems 返回 null 或解析失败?
常见原因不是 API 写错,而是环境或操作问题:
- 在无痕模式或某些浏览器隐私设置下,
localStorage可能被禁用,调用会抛SecurityError—— 必须加try/catch - 存入值超过浏览器限额(通常 5–10MB),
setItem()会静默失败或抛QuotaExceededError -
getItem()找不到键时返回null,不是空字符串,直接JSON.parse(null)会报错 - 不同协议(
httpvshttps)、子域名(a.example.comvsb.example.com)视为不同源,无法共享
localStorage 能监听变化吗?
可以,但只在「其他标签页」修改时触发本页的 storage 事件,当前页改自己不会触发。
- 监听用
window.addEventListener('storage', handler) - 回调里能拿到
event.key、event.oldValue、event.newValue、event.url - 注意:Safari 在无痕模式下不触发该事件;且事件不会告诉你哪个标签页改的,只通知“有变化”
这个机制适合做跨标签页状态同步(如登录态刷新),但别指望它替代状态管理库。
真正容易被忽略的是:localStorage 是阻塞式同步 API,大量读写会卡主线程;如果存的是大对象或频繁操作,得考虑防抖、分片或换用 IndexedDB。











