WebStorage是什么？localStorage和sessionStorage使用教程

大家好，我们又见面了啊~本文《Web Storage是什么？如何用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"，导致后续解析失败。

推荐加一层封装，避免裸调用：

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~