HTML中sessionStorage的生命周期与localStorage的区别对比-html教程-PHP中文网

sessionstorage 仅在单个标签页内有效，关闭该标签页即清空；localstorage 同源共享且永不过期，但需手动清除或调用 clear/removeitem。

html中sessionstorage的生命周期与localstorage的区别对比

sessionStorage 关闭标签页就清空，不是“关浏览器”才丢

sessionStorage 的生命周期只绑定到单个标签页（或由 window.open() 打开的独立窗口），不是整个浏览器进程。只要用户点击关闭那个 tab，数据立刻消失，没有缓冲、不等待、不可恢复。即使你刚刷新过页面、用 history.pushState() 切了路由、甚至反复 location.reload()，只要 tab 还开着，数据就稳稳在。但一旦关掉——哪怕只是右键“关闭其他标签页”，那个 tab 对应的 sessionStorage 就彻底没了。

常见错误现象：

用户在表单填了一半，顺手右键“在新标签页中打开”同一 URL，新页读不到旧 sessionStorage 数据，直接空白
调试时用 window.close() 关闭自己打开的弹窗，结果发现弹窗里的 sessionStorage 没传回主页面（它根本传不出去）
误以为隐私模式下 session 数据能跨标签页复用，实际每个隐私 tab 都是全新隔离实例

localStorage 永不过期，但“永久”不等于“安全”

localStorage 的数据只要同源（协议+域名+端口一致），所有标签页共享，且不会因页面刷新、关闭浏览器、甚至重启电脑而丢失。它的“永久”只受三类操作影响：localStorage.removeItem()、localStorage.clear()，或用户手动清除网站数据。没有自动过期机制，存进去的 token 或用户设置永远不会自己失效。

容易踩的坑：

把登录态 token 直接存在 localStorage 里却不加时间戳校验，用户登出后 token 仍有效，或 token 已过期却还在用
多标签页同时操作：A 标签页调用 localStorage.setItem('cart', '...')，B 标签页几乎同时读取，可能拿到脏数据（无监听机制，需自行用 storage 事件同步）
误以为 localStorage 加密了——它纯文本存储，任何同源脚本都能读写，敏感信息如密码、短期凭证不该放这里

同域下多标签页间，sessionStorage 彼此完全隔离

这是最常引发状态错乱的点。假设你在 https://example.com/a.html 的 tab A 中执行：sessionStorage.setItem('step', '2')，然后新开一个 tab B 访问 https://example.com/b.html，此时 sessionStorage.getItem('step') 返回 null，不是 '2'。两个 tab 的 sessionStorage 是两套完全无关的存储空间。

Ai Coach Batch Session Summary

批量分析录音转写，输出多维度拓客报告。触发词：录音分析、总结、音频总结、拜访记录总结。当用户提及「分析录音」「看看录音数据」「最近的录音」「通话记录」且意图为批量统计/分析时触发。仅出现「录音」或「拜访」时需结合上下文，若仅查看单条详情则不触发。

下载

适用场景很明确：

单页内多步骤表单的中间状态（比如地址页 → 支付页 → 成功页，不希望用户新开 tab 后继续填错流程）
临时导航参数，例如从列表页带 from=list 进详情页，仅本次会话内有效
一次性 CSRF token 或页面级临时密钥，关 tab 即销毁，无需后端主动作废

存对象必须 JSON.stringify()，否则得到 "[object Object]"

两者都只接受字符串作为值。如果你直接 sessionStorage.setItem('user', {name: 'Alice'})，实际存进去的是 "[object Object]"，之后 JSON.parse() 会报错。这个转换不是可选项，是硬性要求。

正确写法：

const user = { name: 'Alice', id: 123 };
sessionStorage.setItem('user', JSON.stringify(user));
// 读取时
const stored = sessionStorage.getItem('user');
const parsedUser = stored ? JSON.parse(stored) : null;

注意：如果 getItem() 返回 null，直接 JSON.parse(null) 会抛 SyntaxError，务必先判空。

真正麻烦的不是语法，而是忘了这一步——尤其在快速原型阶段，本地测着没问题，上线后某次缓存未清或异常路径导致 setItem 传了 undefined，后续整个逻辑链就卡死在解析环节。