javascript如何操作浏览器的本地存储？_localStorage和sessionStorage有何区别？【教程】
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。
为什么有时 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，大量读写会卡主线程；如果存的是大对象或频繁操作，得考虑防抖、分片或换用 Inde
