localStorage永久存储，sessionStorage仅限当前标签页；前者跨页面保留，后者关页即清；均受同源限制、API相同但数据隔离，且均不加密、不可用于存敏感信息。
localStorage 和 sessionStorage 都是浏览器提供的 Web Storage API，但它们的生命周期、作用域和使用场景完全不同。选错一个，轻则数据丢失，重则用户登录态异常。
生命周期：sessionStorage 关闭标签页就清空，localStorage 永久保留（除非手动删）
sessionStorage 的数据只在当前浏览器标签页（tab）内有效，关闭该 tab 后数据立即销毁；即使刷新页面或跳转同域其他路径，数据仍在。localStorage 则会一直保留在本地，直到被代码显式调用 localStorage.removeItem() 或 localStorage.clear() 删除，或用户手动清除浏览器缓存。
常见错误现象：
• 用 sessionStorage 存 token，用户新开一个 tab 访问首页，结果没登录态 → 因为新 tab 是全新 session
• 用 localStorage 存临时表单草稿，用户换设备就找不到了 → 它不跨设备、不跨浏览器
- 适用场景举例：
–sessionStorage：多步骤表单的中间状态、临时筛选条件、防重复提交的 nonce 值
–localStorage：用户主题偏好、长期登录凭证（配合后端 refresh token）、离线缓存的静态资源哈希 - 注意：两者都受同源策略限制，
https://a.com和https://b.com互不可见；子域名间也不共享（app.example.com≠api.example.com）
API 完全一致，但数据隔离：不能互相读写，也不能用同一 key 混淆
它们都提供 setItem()、getItem()、removeItem()、clear() 四个方法，语法一模一样。但底层存储空间完全独立 —— 往 sessionStorage.setItem('user', 'alice') 写入，不会影响 localStorage.getItem('user') 的返回值，反之亦然。
立即学习“Java免费学习笔记（深入）”；
容易踩的坑：
• 开发时误把 localStorage 当成“更安全的 sessionStorage”，其实两者都不加密、都可被 JS 直接读取，敏感信息（如密码、原始 token）绝不该存进去
• 在 Vue/React 组件中同时监听 storage 事件，却发现只有 localStorage 变化才触发 —— 正确：sessionStorage 的变更不会触发 storage 事件，这是规范限定的
window.addEventListener('storage', (e) => {
console.log(e.key, e.oldValue, e.newValue); // 只对 localStorage 生效
});容量限制和性能差异：都约 5–10MB，但 sessionStorage 更轻量
主流浏览器对两者的单域名存储上限基本一致（通常 5MB 左右），但实际可用值受浏览器实现影响，比如 Safari 的私密模式可能直接禁用 localStorage。sessionStorage 因为生命周期短、不持久化到磁盘，在高频写入场景（如实时编辑器每秒存一次）下内存压力略小，而 localStorage 频繁写入可能触发磁盘 I/O，造成轻微卡顿。
- 判断是否已满的可靠方式不是查容量，而是捕获异常：
try { localStorage.setItem('test', 'x'.repeat(1024 * 1024)); } catch (e) { if (e.name === 'QuotaExceededError') { console.error('localStorage 已满'); } } - 字符串以外的数据必须序列化：
localStorage.setItem('config', JSON.stringify({ theme: 'dark', lang: 'zh' }))
读取时记得JSON.parse(localStorage.getItem('config'))，否则得到的是字符串
真正难的不是记住区别，而是每次调用 setItem 前，得想清楚：这个值要不要跨 tab 共享？关掉页面后还有没有意义？有没有被 XSS 直接偷走的风险？这三个问题没答案，就先别往里写。
