前端跨标签页通信：BroadcastChannel 原理解析与实战

背景与需求

在现代前端单页应用（SPA）中，我们经常会遇到这样的需求：用户在标签页 A 进行操作后，新打开的标签页 B 需要将数据实时同步回标签页 A。比如在多标签页的管理系统中，编辑一个条目后，希望列表页能自动刷新。

在基于 dva + umi + React 的技术栈中，我最初尝试了两种看似合理的方案，但均以失败告终。本文将深入分析失败原理，并引出真正的解决方案——Broadcast Channel API。

一、失败方案回顾与原理剖析

方案一：全局 Modal/State 存储 + useEffect 监听

代码示例：

// 新标签页获取数据后 dispatch({type:'global/updateSharedData',payload: newData });
// 原标签页监听
useEffect(()=>{
    // 期望这里能收到新标签页的数据
    console.log('数据更新了:', sharedData);
},[sharedData]);

失败原理：浏览器进程隔离

• 每个浏览器标签页都是独立的进程，拥有完全独立的内存空间
• 你的 dva modal 状态是存储在当前标签页的内存中
• 新标签页的 dispatch 操作的是它自己的 modal 状态，与原标签页的 modal毫无关系
• 这就好比你在北京打电话，期望上海的电话铃会响——根本不在同一个物理空间

方案二：LocalStorage + 主动获取

代码示例：

// 新标签页存储数据
localStorage.setItem('sharedData',JSON.stringify(newData));
// 原标签页轮询获取
useEffect(()=>{
    const interval =setInterval(()=>{
        const data = localStorage.getItem('sharedData');
        if(data){
            setData(JSON.parse(data));
            localStorage.removeItem();
        }
    },);
    (interval);
},[]);