localStorage持久存储、跨标签页共享，适合长期非敏感数据；sessionStorage仅限当前标签页、关闭即销毁，适合临时状态。二者均只支持字符串、需手动序列化，不可存敏感信息，且无过期机制。
localStorage 和 sessionStorage 都能存字符串，但生命周期、作用域和用途完全不同——选错一个，轻则数据丢失，重则用户登录态错乱。
localStorage 会一直留着，除非你手动删或用户清缓存
它把数据写在浏览器本地磁盘上，关页面、关浏览器、重启电脑都不影响。适合存用户偏好、主题设置、离线缓存的列表页数据这类「长期有用但不敏感」的信息。
- 同一域名下所有标签页共享同一个
localStorage，改一个，其他页storage事件能监听到 - 容量通常为 5–10 MB（各浏览器略有差异），远大于
cookie - 只支持字符串，存对象得先
JSON.stringify()，取出来得JSON.parse() - 不能跨子域访问：
app.example.com和api.example.com是两个独立的localStorage
localStorage.setItem('theme', 'dark');
localStorage.setItem('userSettings', JSON.stringify({ fontSize: 16, lang: 'zh' }));
// 取值
const theme = localStorage.getItem('theme'); // 'dark'
const settings = JSON.parse(localStorage.getItem('userSettings')); // { fontSize: 16, lang: 'zh' }
sessionStorage 只在当前标签页活着，关了就清空
它的生命周期绑定在「浏览器标签页会话」上：新开一个标签页是全新一份；页面刷新保留；关闭该标签页后数据立刻销毁。适合临时中转数据，比如多步表单的中间状态、搜索关键词的暂存。
- 即使同域名，不同标签页之间的
sessionStorage完全隔离，互不可见 - 不触发跨标签页的
storage事件（因为根本没“跨”） - 同样只存字符串，同样要手动序列化/反序列化
- 容量和
localStorage基本一致，但部分旧版 Safari 对sessionStorage限制更严
sessionStorage.setItem('formStep', '2');
sessionStorage.setItem('searchQuery', 'javascript storage');
// 关闭这个标签页后，这两项就彻底消失了
别用它们存敏感信息，也别指望它们替代后端数据库
两者都运行在前端，任何用户都能打开 DevTools 直接读写 localStorage 或 sessionStorage，所以绝对不能放 token、密码、身份证号这类东西。另外，它们没有过期时间、没有自动同步机制、不支持索引查询，复杂逻辑一上来就容易卡住。
立即学习“Java免费学习笔记（深入）”；
- JWT token 如果只是临时使用（如登录后跳转），用
sessionStorage更安全；需要“记住我”，才考虑加密后走localStorage+ 后端校验 - 大量数据（比如上万条日志）写入会导致主线程阻塞，
localStorage是同步 API，卡顿明显 - 隐私模式下，Safari 和 Firefox 的
localStorage是会话级的（关窗口即清），行为和sessionStorage一样，这点容易被忽略 - 如果要用键值对持久化，又需要加密或过期控制，建议封装一层工具类，而不是裸用原生 API
真正难的不是“怎么存”，而是想清楚“谁需要读、什么时候失效、出错了怎么降级”。比如用户切到另一个标签页继续操作，sessionStorage 就断了，这时候要不要 fallback 到 localStorage？要不要和服务端对一次时钟？这些细节比语法本身重要得多。
