你打开两个浏览器标签页，都是同一个网站。在标签页A里改了 localStorage，想让标签页B立刻知道。

你第一反应可能是：加个监听事件不就行了？

但试了一下发现，当前页面自己改 localStorage，自己根本收不到通知。只有**其他页面**才能收到。

这就有点反直觉了。


----
## storage 事件怎么用

JavaScript 提供了一个叫 `storage` 的事件，但它有个限制：只有**别的同源页面**改了 localStorage，当前页面才会触发。自己改自己，没反应。

用法倒是简单：

```JavaScript
window.addEventListener('storage', (e) => {
 console.log('别的页面改了 localStorage');
 console.log('改了哪个key:', e.key);
 console.log('新值:', e.newValue);
 console.log('旧值:', e.oldValue);
});
```
事件对象里带着 `key`、`oldValue`、`newValue`、`url` 这些字段，够用了。

比如你想实现一个换肤功能，用户在A页面改了主题色，B页面自动跟着变：

```JavaScript
window.addEventListener('storage', (e) => {
 if (e.key === 'userTheme') {
 document.documentElement.setAttribute('data-theme', e.newValue || 'light');
 }
});
```
这个事件触发的条件是：必须是另一个同源页面调用了 `setItem` 或者 `removeItem`。你自己在当前页面调，不会触发。


----
## 当前页面也想响应怎么办

这就有点尴尬了。

你在当前页面改了 localStorage，当前页面自己收不到通知。如果你想“不管谁改，我都响应”，就得自己封装一层。

不要直接写 `localStorage.setItem('xxx', value)`，而是写一个函数：

```JavaScript
function updateStorage(key, value) {
 // 先写入
 localStorage.setItem(key, JSON.stringify(value));
 // 再手动更新本地状态
 // 比如 React 里调 setState，Vue 里改 ref
 // 或者派发一个自定义事件
 window.dispatchEvent(new CustomEvent('local-update', { detail: { key, value } }));
}
```
这样，跨页同步靠 `storage` 事件，本页响应靠封装逻辑。两边都不耽误。


----
## 几个容易踩的坑

**iframe 的问题**

如果 iframe 和主页面同源，iframe 里改了 localStorage，主页面能收到 `storage` 事件。但如果跨域，不行，而且你也访问不到对方的 localStorage。

**无痕模式**

Safari 和一些浏览器在无痕模式下会禁用 localStorage，`storage` 事件也不会触发。如果你的功能依赖这个，要考虑降级方案。

**存 undefined 的坑**

`localStorage.setItem('key', undefined)` 并不会存一个空值，而是存进去字符串 `"undefined"`。取出来的时候你以为是 `null`，结果是 `"undefined"`。

建议统一用 `JSON.stringify` 存，读取的时候用 `JSON.parse` 包一下，顺便处理异常。

**事件不冒泡**

`storage` 事件不会冒泡，也不能委托。必须绑定在 `window` 上，而且尽量早注册，比如在模块初始化的时候就加上。


----
## 复杂场景用什么

如果只是同步一下主题色、登录状态，`storage` 事件够用了。

但如果你需要更可靠的跨页面通信，比如实时广播、双向响应，可以考虑别的方案：

**BroadcastChannel API**

现代浏览器都支持，专门为同源页面通信设计的。用法比 `storage` 事件更直接，不需要经过 localStorage 中转。

```JavaScript
const channel = new BroadcastChannel('my-channel');
channel.postMessage({ type: 'theme-change', value: 'dark' });
channel.onmessage = (e) => {
 console.log(e.data);
};
```
**SharedWorker**

所有同源页面共享一个 Worker，可以作为消息中转站。功能更强，但配置稍微复杂一点。

**URL hash + popstate**

适合简单的状态同步，比如切换语言、切换主题。但数据不持久，刷新页面就丢了。


----
对于大部分场景，`storage` 事件加上一层封装，已经足够用了。知道它的限制在哪，绕过去就行。

 推荐查看天气：http://www.362tq.com/zhuolu/zuotian.html
 推荐查看天气：http://www.362tq.com/zhuolu/7tian.html
 推荐查看天气：http://www.362tq.com/zhuolu/10tian.html
 推荐查看天气：http://www.362tq.com/zhuolu/15tian.html
 推荐查看天气：http://www.362tq.com/zhuolu/40tian.html
 推荐查看天气：http://www.362tq.com/chicheng/
 推荐查看天气：http://www.362tq.com/chicheng/zuotian.html
 推荐查看天气：http://www.362tq.com/chicheng/7tian.html
 推荐查看天气：http://www.362tq.com/chicheng/10tian.html
 推荐查看天气：http://www.362tq.com/chicheng/15tian.html
 推荐查看天气：http://www.362tq.com/chicheng/40tian.html
 推荐查看天气：http://www.362tq.com/chongli/
 推荐查看天气：http://www.362tq.com/chongli/zuotian.html
 推荐查看天气：http://www.362tq.com/chongli/7tian.html
 推荐查看天气：http://www.362tq.com/chongli/10tian.html
 推荐查看天气：http://www.362tq.com/chongli/15tian.html
 推荐查看天气：http://www.362tq.com/chongli/40tian.html
 推荐查看天气：http://www.362tq.com/chengde/
 推荐查看天气：http://www.362tq.com/chengde/zuotian.html
 推荐查看天气：http://www.362tq.com/chengde/7tian.html
 推荐查看天气：http://www.362tq.com/chengde/10tian.html
 推荐查看天气：http://www.362tq.com/chengde/15tian.html
 推荐查看天气：http://www.362tq.com/chengde/40tian.html
 推荐查看天气：http://www.362tq.com/shuangluan/
 推荐查看天气：http://www.362tq.com/shuangluan/zuotian.html
 推荐查看天气：http://www.362tq.com/shuangluan/7tian.html
 推荐查看天气：http://www.362tq.com/shuangluan/10tian.html
 推荐查看天气：http://www.362tq.com/shuangluan/15tian.html
 推荐查看天气：http://www.362tq.com/shuangluan/40tian.html
 推荐查看天气：http://www.362tq.com/chengdexian/
 推荐查看天气：http://www.362tq.com/chengdexian/zuotian.html
 推荐查看天气：http://www.362tq.com/chengdexian/7tian.html
 推荐查看天气：http://www.362tq.com/chengdexian/10tian.html
 推荐查看天气：http://www.362tq.com/chengdexian/15tian.html
 推荐查看天气：http://www.362tq.com/chengdexian/40tian.html
 推荐查看天气：http://www.362tq.com/xinglong/
 推荐查看天气：http://www.362tq.com/xinglong/zuotian.html
 推荐查看天气：http://www.362tq.com/xinglong/7tian.html
 推荐查看天气：http://www.362tq.com/xinglong/10tian.html
 推荐查看天气：http://www.362tq.com/xinglong/15tian.html
 推荐查看天气：http://www.362tq.com/xinglong/40tian.html
 推荐查看天气：http://www.362tq.com/pingquan/
 推荐查看天气：http://www.362tq.com/pingquan/zuotian.html
 推荐查看天气：http://www.362tq.com/pingquan/7tian.html
 推荐查看天气：http://www.362tq.com/pingquan/10tian.html
 推荐查看天气：http://www.362tq.com/pingquan/15tian.html
 推荐查看天气：http://www.362tq.com/pingquan/40tian.html
 推荐查看天气：http://www.362tq.com/luanping/
 推荐查看天气：http://www.362tq.com/luanping/zuotian.html
 推荐查看天气：http://www.362tq.com/luanping/7tian.html
 推荐查看天气：http://www.362tq.com/luanping/10tian.html
 推荐查看天气：http://www.362tq.com/luanping/15tian.html
 推荐查看天气：http://www.362tq.com/luanping/40tian.html
 推荐查看天气：http://www.362tq.com/chengdelonghua/
 推荐查看天气：http://www.362tq.com/chengdelonghua/zuotian.html
 推荐查看天气：http://www.362tq.com/chengdelonghua/7tian.html
 推荐查看天气：http://www.362tq.com/chengdelonghua/10tian.html
 推荐查看天气：http://www.362tq.com/chengdelonghua/15tian.html
 推荐查看天气：http://www.362tq.com/chengdelonghua/40tian.html
 推荐查看天气：http://www.362tq.com/fengning/
 推荐查看天气：http://www.362tq.com/fengning/zuotian.html
 推荐查看天气：http://www.362tq.com/fengning/7tian.html
 推荐查看天气：http://www.362tq.com/fengning/10tian.html
 推荐查看天气：http://www.362tq.com/fengning/15tian.html
 推荐查看天气：http://www.362tq.com/fengning/40tian.html
 推荐查看天气：http://www.362tq.com/chengdekuancheng/
 推荐查看天气：http://www.362tq.com/chengdekuancheng/zuotian.html
 推荐查看天气：http://www.362tq.com/chengdekuancheng/7tian.html
 推荐查看天气：http://www.362tq.com/chengdekuancheng/10tian.html
 推荐查看天气：http://www.362tq.com/chengdekuancheng/15tian.html
 推荐查看天气：http://www.362tq.com/chengdekuancheng/40tian.html
 推荐查看天气：http://www.362tq.com/weichang/
 推荐查看天气：http://www.362tq.com/weichang/zuotian.html
 推荐查看天气：http://www.362tq.com/weichang/7tian.html
 推荐查看天气：http://www.362tq.com/weichang/10tian.html
 推荐查看天气：http://www.362tq.com/weichang/15tian.html
 推荐查看天气：http://www.362tq.com/weichang/40tian.html
 推荐查看天气：http://www.362tq.com/cangzhou/
 推荐查看天气：http://www.362tq.com/cangzhou/zuotian.html
 推荐查看天气：http://www.362tq.com/cangzhou/7tian.html
 推荐查看天气：http://www.362tq.com/cangzhou/10tian.html
 推荐查看天气：http://www.362tq.com/cangzhou/15tian.html
 推荐查看天气：http://www.362tq.com/cangzhou/40tian.html
 推荐查看天气：http://www.362tq.com/cangzhouxinhua/
 推荐查看天气：http://www.362tq.com/cangzhouxinhua/zuotian.html
 推荐查看天气：http://www.362tq.com/cangzhouxinhua/7tian.html
 推荐查看天气：http://www.362tq.com/cangzhouxinhua/10tian.html
 推荐查看天气：http://www.362tq.com/cangzhouxinhua/15tian.html
 推荐查看天气：http://www.362tq.com/cangzhouxinhua/40tian.html
 推荐查看天气：http://www.362tq.com/cangxian/
 推荐查看天气：http://www.362tq.com/cangxian/zuotian.html
 推荐查看天气：http://www.362tq.com/cangxian/7tian.html
 推荐查看天气：http://www.362tq.com/cangxian/10tian.html
 推荐查看天气：http://www.362tq.com/cangxian/15tian.html
 推荐查看天气：http://www.362tq.com/cangxian/40tian.html
 推荐查看天气：http://www.362tq.com/qingxian/
 推荐查看天气：http://www.362tq.com/qingxian/zuotian.html
 推荐查看天气：http://www.362tq.com/qingxian/7tian.html
 推荐查看天气：http://www.362tq.com/qingxian/10tian.html
 推荐查看天气：http://www.362tq.com/qingxian/15tian.html

你打开两个浏览器标签页，都是同一个网站。在标签页A里改了 localStorage，想让标签页B立刻知道。

JavaScript 里怎么监听 localStorage 被其他页面改了

JavaScript 提供了一个叫 `storage` 的事件，但它有个限制：只有**别的同源页面**改了 localStorage，当前页面才会触发。自己改自己，没反应。

编程语言

前端

localStorage跨标签页同步：storage事件仅在其他同源页面修改时触发，本页需封装setItem函数配合自定义事件实现双向响应。深入解析事件特性、iframe限制及无痕模式隐患，对比BroadcastChannel与SharedWorker方案，提供实用代码示例与避坑指南。

代码解释

ReAct 

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

JavaScript 里怎么监听 localStorage 被其他页面改了-腾讯云开发者社区-腾讯云

JavaScript 里怎么监听 localStorage 被其他页面改了

JavaScript 里怎么监听 localStorage 被其他页面改了

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐