什么是Web Storage_如何在javascript中使用localStorage和sessionStorage【教程】

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免费学习笔记（深入）”；

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 往往更可控。