sessionstorage 和 localstorage 的核心区别在于数据生命周期和作用域：sessionstorage 仅限单标签页、关闭即清空；localstorage 跨标签页持久保存，但需手动清除或超容处理。
sessionStorage 和 localStorage 的核心区别不在 API，而在数据生命周期和作用域——选错一个，轻则刷新丢数据，重则跨标签页状态错乱。
sessionStorage 数据只活在当前标签页里
你打开一个页面，存了 sessionStorage.setItem('cart', '["apple"]')；再右键「在新标签页中打开」同一个 URL，新页里 sessionStorage.getItem('cart') 返回 null。这不是 bug，是设计如此。
- 关闭该标签页 → 所有
sessionStorage数据立即清空 - 刷新页面、前进后退、页面崩溃恢复 → 数据保留
- 同一域名下，不同标签页/窗口之间完全隔离，互不可见
- 适合临时状态：表单草稿、多步流程的中间步骤、未提交的筛选条件
localStorage 是跨标签页的持久仓库
localStorage 的数据会一直留在浏览器里，除非用户手动清除、代码调用 localStorage.clear() 或 localStorage.removeItem()，或者你网站被加进隐私模式（此时写入可能静默失败）。
- 关闭并重新打开浏览器 → 数据还在
- 多个标签页同时打开同一站点 → 修改一处，其他页监听
storage事件可感知变化 - 同源限制严格：协议、域名、端口必须完全一致，
http://a.com和https://a.com互不访问 - 适合长期缓存：用户主题偏好、语言设置、离线内容快照
都只能存字符串，复杂数据得自己序列化
两者都只接受字符串作为值。直接存对象会变成 [object Object]，取出来就废了。
- 存前必须
JSON.stringify()：localStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'})) - 取后必须
JSON.parse()：const user = JSON.parse(localStorage.getItem('user')) - 如果值为
null或解析失败，JSON.parse()会抛SyntaxError，务必 try-catch - 注意移动端 JSON 序列化/反序列化性能敏感，大对象慎用
容量和错误处理不能靠“差不多”
标称 5MB 是常见值，但实际因浏览器而异（Chrome 约 10MB，Safari 私密模式可能直接禁用），且超出时行为不统一。
-
localStorage.setItem()超容时：Chrome 抛QuotaExceededError，Firefox 可能静默截断 - 不要假设
getItem()总是快的——当存储接近满时，读取性能可能陡降 - 没有内置过期机制，自己加时间戳字段 + 读取时校验，或封装成带 TTL 的工具函数
- 别把敏感信息（如 token）直接塞进去，localStorage 可被 XSS 直接读取
真正容易被忽略的是：它们都受同源策略硬约束，且无法跨 iframe 访问——哪怕同域，只要嵌套的 iframe 是 sandbox 属性或协议不同，localStorage 就不可见。这种场景下，别硬扛，改用 postMessage 配合主窗口代理更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
