当前位置：首页 > 文章列表 > 文章 > 前端 > WebStorage是什么？localStorage和sessionStorage使用教程

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

2026-02-07 12:42:45 0浏览收藏

大家好，我们又见面了啊~本文《Web Storage是什么？如何用localStorage和sessionStorage【教程】》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

localStorage数据永久保存且同源标签页共享，sessionStorage仅当前标签页有效且独立；两者均受同源策略限制，仅支持字符串存储，需JSON序列化对象，且localStorage可被storage事件监听而sessionStorage不可。

什么是Web Storage_如何在javascript中使用localStorage和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);
});