localStorage数据永久保存且同源标签页共享，sessionStorage仅当前标签页有效且独立；两者均受同源策略限制，仅支持字符串存储，需JSON序列化对象，且localStorage可被storage事件监听而sessionStorage不可。
localStorage 和 sessionStorage 的本质区别是什么
它们都是浏览器提供的键值对存储 API，但生命周期和作用域完全不同：localStorage 数据永久保存（除非手动清除），而 sessionStorage 仅在当前浏览器标签页会话期间有效，关闭标签即销毁。
关键点在于“同源”限制：两个 API 都只对相同协议、域名、端口的页面可见。比如 https://a.com 写入的数据，https://b.com 或 http://a.com 都读不到。
-
localStorage共享于同源的所有标签页和窗口 -
sessionStorage每个标签页独立，即使同源也无法跨标签共享 - 两者都只能存字符串；存对象必须先
JSON.stringify()，读取后要JSON.parse()
怎么安全地写入和读取 localStorage
直接调用 setItem() 和 getItem() 最常见，但容易忽略错误边界——比如存储超限（通常 5–10MB）、值为 undefined 或 null 时自动转成字符串 "undefined" 或 "null"，导致后续解析失败。
推荐加一层封装，避免裸调用：
立即学习“Java免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
function safeSet(key, value) {
try {
const str = JSON.stringify(value);
localStorage.setItem(key, str);
} catch (e) {
console.warn(`localStorage set failed for ${key}:`, e.message);
}
}
function safeGet(key, defaultValue = null) {
try {
const str = localStorage.getItem(key);
return str ? JSON.parse(str) : defaultValue;
} catch (e) {
console.warn(`localStorage get failed for ${key}:`, e.message);
return defaultValue;
}
}
- 不要直接
localStorage.foo = 'bar'—— 这种赋值方式不触发 storage 事件，且无法捕获异常 - 避免存储函数、日期对象、正则等无法被
JSON.stringify()序列化的值 - 敏感信息（如 token）慎用
localStorage，它比 cookie 更易被 XSS 窃取
如何监听 localStorage 变化
仅靠轮询或手动刷新是低效的。storage 事件能在同一域名下其他标签页修改 localStorage 时触发，但注意：当前标签页的修改不会触发自己的 storage 事件。
window.addEventListener('storage', (e) => {
console.log('Key changed:', e.key);
console.log('Old value:', e.oldValue);
console.log('New value:', e.newValue);
console.log('URL that triggered it:', e.url);
});
- 该事件只适用于
localStorage，sessionStorage不支持 - 如果多个标签页同时写同一个 key，只有“非发起者”的标签页会收到事件
- 事件对象中的
oldValue和newValue是字符串，需自行JSON.parse()才能还原结构
sessionStorage 的典型使用场景有哪些
它适合临时、单次会话内的状态缓存，比如表单草稿、向导步骤、未提交的筛选条件。因为关掉标签就清空，天然防脏数据残留。
一个常见误用是把它当“轻量版 cookie”传参——比如跳转前存 sessionStorage.setItem('from', 'search')，回来时读取。这可行，但要注意：
- 用户新开标签访问同一 URL，
sessionStorage是空的，不能依赖它传递上下文 - SPA 中路由切换不会重置
sessionStorage，但刷新页面会保留（只要没关标签） - 它不参与 HTTP 请求，服务端完全不可见，别指望后端能读到
真正需要跨页面传递少量数据时，URL searchParams 或 postMessage 往往更可控。
