HTML5本地存储sessionStorage怎么用_会话级数据存储【详解】_技术教程

sessionStorage是仅在当前标签页生命周期内有效的会话存储，关闭标签页即清空；与localStorage接口相同但作用域隔离、不跨tab共享，且刷新不丢失数据。

sessionStorage 是什么，和 localStorage 有什么区别

sessionStorage 是浏览器提供的会话级键值对存储，数据仅在当前标签页（tab）的生命周期内有效：关闭该标签页后自动清空。它和 localStorage 接口完全一致，但作用域更严格——即使同一域名下的两个标签页，它们的 sessionStorage 也是完全隔离的。

关键区别在于：

sessionStorage 不跨 tab 共享，localStorage 跨 tab、跨窗口共享
sessionStorage 不参与页面刷新，数据保留；但关闭标签页（包括右键“关闭标签页”、Ctrl+W、或整个浏览器进程退出）即销毁
两者都只支持字符串值，存对象必须用 JSON.stringify()，取时用 JSON.parse()

怎么存、取、删 sessionStorage 数据

所有操作都通过 window.sessionStorage 对象调用，方法名和 localStorage 完全相同，没有额外参数或配置。

常见操作示例：

立即学习“前端免费学习笔记（深入）”；

sessionStorage.setItem('userToken', 'abc123');
sessionStorage.setItem('userInfo', JSON.stringify({ id: 1001, name: 'Alice' }));
const token = sessionStorage.getItem('userToken'); // 'abc123'
const userInfo = JSON.parse(sessionStorage.getItem('userInfo')); // { id: 1001, name: 'Alice' }
sessionStorage.removeItem('userToken');
sessionStorage.clear(); // 清空当前 tab 的全部 sessionStorage

注意：setItem() 和 getItem() 的 key 是区分大小写的；如果 key 不存在，getItem() 返回 null，不是 undefined。

sessionStorage 在页面刷新时会不会丢数据

不会丢。只要没关闭标签页，哪怕执行 location.reload()、F5 刷新、或点击链接跳转到同域其他页面（history push/pop），sessionStorage 都保持完好。

但以下情况会丢失：

用户手动关闭当前标签页（包括 Ctrl+W、右键关闭、拖出新窗口后关原页）
用户使用「恢复上次会话」重启浏览器，且原标签页未被浏览器主动保留（Chrome 默认不保留 sessionStorage）
代码中显式调用了 sessionStorage.clear() 或 removeItem()
页面被嵌入且 iframe 的 src 是不同源地址（此时访问会触发安全限制，抛出 SecurityError）

为什么有时 setItem 报错 “QuotaExceededError”

虽然叫“session”，但它仍受浏览器存储配额限制（通常为 5–10MB，取决于浏览器和版本）。这个错误和生命周期无关，纯粹是容量超了。

触发场景包括：

一次性写入超大字符串（比如 base64 图片、未压缩日志）
反复 setItem() 却未 removeItem()，导致累积溢出
在私密模式（如 Chrome Incognito）下，部分浏览器会进一步收紧配额

排查建议：

先检查当前已用空间：

function getSessionStorageSize() {
  let total = 0;
  for (let key in sessionStorage) {
    if (sessionStorage.hasOwnProperty(key)) {
      total += (key.length + sessionStorage[key].length) * 2; // 近似字节数
    }
  }
  return total;
}
console.log(getSessionStorageSize()); // 单位：字节