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()); // 单位：字节真正安全的做法是：敏感中间态数据（如表单草稿）可存，但大体积缓存应优先考虑 IndexedDB 或服务端临时存储。
sessionStorage 最适合存轻量、强会话绑定的数据，比如登录态 token、当前筛选条件、向导步骤序号——一旦离开这个 tab，这些上下文就自然失效，不需要清理逻辑。
