javascript如何操作浏览器的本地存储？_localStorage和sessionStorage有何区别？【教程】

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

localStorage 和 sessionStorage 都能存字符串，但生命周期、作用域和用途完全不同——别用错，否则数据会莫名其妙消失或跨标签泄露。

怎么安全地存取 localStorage？

localStorage 只接受字符串，直接存对象会变成 [objec

t 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。

为什么有时 getItems 返回 null 或解析失败？

常见原因不是 API 写错，而是环境或操作问题：

• 在无痕模式或某些浏览器隐私设置下，localStorage 可能被禁用，调用会抛 SecurityError —— 必须加 try/catch
• 存入值超过浏览器限额（通常 5–10MB），setItem() 会静默失败或抛 QuotaExceededError
• getItem() 找不到键时返回 null，不是空字符串，直接 JSON.parse(null) 会报错
• 不同协议（http vs https）、子域名（a.example.com vs b.example.com）视为不同源，无法共享

localStorage 能监听变化吗？

可以，但只在「其他标签页」修改时触发本页的 storage 事件，当前页改自己不会触发。

• 监听用 window.addEventListener('storage', handler)
• 回调里能拿到 event.key、event.oldValue、event.newValue、event.url
• 注意：Safari 在无痕模式下不触发该事件；且事件不会告诉你哪个标签页改的，只通知“有变化”

这个机制适合做跨标签页状态同步（如登录态刷新），但别指望它替代状态管理库。

真正容易被忽略的是：localStorage 是阻塞式同步 API，大量读写会卡主线程；如果存的是大对象或频繁操作，得考虑防抖、分片或换用 IndexedDB。