localStorage与sessionStorage怎么用？

localStorage和sessionStorage虽同属Web Storage API且API接口一致，却在生命周期、作用域和安全性上存在本质差异：前者持久存储、跨页面共享但不跨设备，后者仅限单标签页、关闭即销毁；二者均受同源限制、完全数据隔离、无加密机制，绝不可存放敏感信息；选错存储方式轻则导致表单草稿丢失、登录态异常，重则引发安全风险——真正关键的不是语法，而是每次写入前冷静三问：它需要跨标签页吗？关页后还有用吗？能承受被XSS窃取吗？

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') 的返回值，反之亦然。

容易踩的坑：
• 开发时误把 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 直接偷走的风险？这三个问题没答案，就先别往里写。

到这里，我们也就讲完了《localStorage与sessionStorage怎么用？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！