17370845950

localStorage数据永久存在且同域共享，sessionStorage仅限当前标签页会话、关闭即销毁且多标签页间隔离；二者均需用JSON.stringify/parse处理对象。

localStorage 和 sessionStorage 的生命周期到底差在哪

根本区别就一条：localStorage 数据永久存在，除非手动清除；sessionStorage 数据只在当前浏览器标签页（或窗口）存活，关掉就没了。这不是“差不多”，而是底层设计逻辑完全不同——前者绑定到域名，后者绑定到页面会话。

关闭浏览器后，sessionStorage 真的全丢了？

是的，但要注意“关闭”的定义：sessionStorage 在以下情况会被清空：

• 用户手动关闭该标签页（或整个窗口）
• 调用 window.close() 关闭当前窗口（且该窗口由 window.open() 打开）
• 浏览器崩溃重启（大多数现代浏览器会保留 tab 会话，但 sessionStorage 不在此列）
• 隐私模式下新开标签页，即使同一域名，sessionStorage 也是全新隔离的

特别注意：刷新页面、前进/后退、甚至页面内 location.reload() 都不会影响 sessionStorage —— 它只认“会话结束”这个硬边界。

同域下多个标签页之间，localStorage 能共享，sessionStorage 不能

这是最常踩坑的点。比如你开了两个 tab 访问 https://example.com/a.html 和 https://example.com/b.html：

• localStorage.setItem('user', 'alice') 在 A 标签页执行 → B 标签页立刻能 localStorage.getItem('user') 读到 'alice'
• sessionStorage.setItem('temp', '123') 在 A 标签页执行 → B 标签页读 sessionStorage.getItem('temp') 返回 null，完全无感知

这种隔离性让 sessionStorage 天然适合存临时表单草稿、页面级 token、导航状态等“不跨页”的数据；而 localStorage 更适合用户偏好、登录态（需配合有效期校验）、离线缓存等跨会话场景。

都用 setItem 存对象，为什么 JSON.stringify 是必选项

因为 localStorage 和 sessionStorage 只接受字符串作为值。直接传对象会触发 .toString()，结果全是 [object Object]：

localStorage.setItem('data', { name: 'Tom' });
console.log(localStorage.getItem('data')); // "[object Object]"

正确做法始终是：

• 存：用 JSON.stringify() 序列化
• 取：用 JSON.parse() 反序列化，并加 try/catch 防止损坏数据导致解析失败

示例：

try {
  const obj = { id: 1, name: 'Tom' };
  localStorage.setItem('user', JSON.stringify(obj));
  const stored = JSON.parse(localStorage.getItem('user'));
} catch (e) {
  console.error('JSON parse failed:', e);
}

别省这一步，否则某天 getItem 返回字符串却当对象用，undefined 错误会出现在最意想不到的地方。