localStorage用于长期存储同源数据（5–10MB），需序列化；sessionStorage仅限当前标签页，刷新保留、关闭清空；二者API相同但数据隔离，支持storage事件跨窗口通信。
本地存储就是浏览器给你留的两个小抽屉，localStorage 是长期保存的抽屉，关掉页面甚至重启电脑都还在；sessionStorage 是临时抽屉，只在当前标签页生命周期内有效，关掉标签就清空。
什么时候该用 localStorage？
适合存那些「用户明确希望下次打开还能看到」的数据，比如：主题偏好、折叠面板状态、搜索历史、已登录用户的 token（注意：敏感 token 更推荐配合后端短期刷新机制，别只靠它）。
关键限制要注意：
-
localStorage的数据是**同源（协议+域名+端口）隔离**的，https://a.com和http://a.com互不可见 - 容量通常为 5–10 MB，但不同浏览器有差异，别指望存大文件或大量 JSON
- 所有操作都是同步阻塞的，频繁写入大对象可能卡住主线程
- 不支持直接存对象，必须用
JSON.stringify()序列化，读取时用JSON.parse()
什么时候该用 sessionStorage？
适合存「只在这一次浏览中需要延续」的状态，比如：表单草稿、多步流程的中间数据、临时筛选条件、未提交的购物车（仅限当前会话）。
立即学习“Java免费学习笔记（深入）”；
特别注意它的边界：
- 新开一个标签页或窗口，哪怕 URL 完全一样，
sessionStorage也是全新的，彼此不共享 - 页面刷新、前进后退都保留，只有关闭标签页或调用
sessionStorage.clear()才会丢 - 和
localStorage一样不支持直接存对象，也要手动序列化/反序列化
localStorage 和 sessionStorage 的 API 完全一致，但数据不互通
它们都提供 setItem()、getItem()、removeItem()、clear() 这四个方法，用法一模一样。但你往 localStorage 存的东西，在 sessionStorage 里绝对 getItem() 不出来，反之亦然——它们是两套独立的键值空间。
例如：
localStorage.setItem('user', JSON.stringify({ id: 123, name: 'Alice' }));
sessionStorage.setItem('tempSearch', 'react hooks');
console.log(localStorage.getItem('tempSearch')); // null
console.log(sessionStorage.getItem('user')); // null
别忽略监听变化和清理时机
两个存储都支持 storage 事件，但它**只在其他同源窗口触发变更时才通知当前窗口**，自己改的不会触发自己监听。所以不能靠它做「本窗口数据更新反馈」，更适合跨标签通信（比如 A 标签登出，B 标签收到事件自动跳转）。
清理方面容易被忽略的点：
- 没手动
removeItem()或clear()的数据会一直占着位置，尤其localStorage可能越积越多 - 用户手动清除浏览器缓存时，这两个存储默认也会被清掉（取决于用户勾选了哪些选项）
- 如果存的是过期 token 或旧版本结构数据，应用启动时最好加一层校验逻辑，避免
JSON.parse()报错或读出脏数据
