17370845950

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、密码、身份证号这类东西。另外，它们没有过期时间、没有自动同步机制、不支持索引查询，复杂逻辑一上来就容易卡住。

• JWT token 如果只是临时使用（如登录后跳转），用 sessionStorage 更安全；需要“记住我”，才考虑加密后走 localStorage + 后端校验
• 大量数据（比如上万条日志）写入会导致主线程阻塞，localStorage 是同步 API，卡顿明显
• 隐私模式下，Safari 和 Firefox 的 localStorage 是会话级的（关窗口即清），行为和 sessionStorage 一样，这点容易被忽略
• 如果要用键值对持久化，又需要加密或过期控制，建议封装一层工具类，而不是裸用原生 API

真正难的不是“怎么存”，而是想清楚“谁需要读、什么时候失效、出错了怎么降级”。比如用户切到另一个标签页继续操作，sessionStorage 就断了，这时候要不要 fallback 到 localStorage？要不要和服务端对一次时钟？这些细节比语法本身重要得多。