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 错误会出现在最意想不到的地方。










