broadcastchannel是浏览器原生支持的同源跨标签页广播通信机制，仅限同协议、域名、端口页面间使用，不兼容ie，消息自动送达所有同名频道监听页但不包括发送方自身，需手动close()防泄漏。
BroadcastChannel 是浏览器原生支持的轻量级跨标签页通信机制，**只适用于同源页面**（即协议、域名、端口完全一致），不能跨域，也不兼容 IE。它不是“共享状态”，而是“广播消息”——发出去的消息会送达所有监听该频道的页面，**但不包括发送方自己**。
创建和使用 BroadcastChannel 实例
每个页面需独立创建同名频道实例，频道名必须完全一致（大小写敏感）才能互通：
const bc = new BroadcastChannel('auth'); // 频道名必须字符串，且所有页面保持一致
bc.postMessage({ type: 'LOGIN_SUCCESS', token: 'abc123' });
bc.onmessage = (event) => {
console.log('收到消息:', event.data);
};
注意：bc.postMessage() 发出后，当前页面的 onmessage 不会触发；只有其他同源、同频道的页面能收到。
- 频道名建议用业务语义命名（如
'auth'、'ws-control'），避免通用名（如'channel'）引发冲突 - 创建后若页面关闭或刷新，
BroadcastChannel实例自动销毁，无需手动close()，但显式调用bc.close()可提前释放资源（尤其在 SPA 路由切换时） - Chrome、Firefox、Edge 从较新版本起稳定支持；Safari 从 16.4 开始支持（iOS/macOS），旧版 Safari 会直接抛
ReferenceError
监听 storage 事件无法替代 BroadcastChannel
很多人误以为用 localStorage.setItem() + window.addEventListener('storage') 就能替代 BroadcastChannel，其实不行：
-
storage事件只在「其他标签页」修改了 localStorage 时触发，当前页修改不会触发自身监听器 —— 这点和BroadcastChannel类似，但关键区别在于：storage 事件不传递自定义数据结构，只能拿到 key/value 字符串，且无法携带二进制或函数等类型 - 频繁写
localStorage会触发同步磁盘 I/O，在低性能设备上可能卡顿；而BroadcastChannel是纯内存广播，无持久化开销 -
storage事件无法区分消息来源 tab（没有event.source或唯一 ID），而BroadcastChannel的event对象虽不暴露 sender ID，但可通过在消息体中手动加tabId: Date.now() + Math.random()实现标记
常见错误：频道未关闭导致内存泄漏或重复监听
在单页应用（SPA）中，如果组件反复挂载/卸载（如 Vue 的 onMounted/onUnmounted、React 的 useEffect），容易忘记清理 BroadcastChannel：
- 多次执行
new BroadcastChannel('x')会创建多个独立实例，各自监听同一频道 → 同一条消息被重复处理 N 次 - 未调用
bc.close()或移除onmessage，会导致闭包持有作用域变量，阻碍 GC - 正确做法是：全局单例复用（如存在则复用已有实例），并在页面卸载前
bc.close()；也可用beforeunload事件兜底
例如：
// 全局缓存，避免重复创建
const channels = {};
function getChannel(name) {
if (!channels[name]) {
channels[name] = new BroadcastChannel(name);
}
return channels[name];
}
// 卸载时清理（Vue 3 setup 中）
onBeforeUnmount(() => {
const bc = getChannel('auth');
bc.close();
delete channels['auth'];
});
需要加密或带身份校验？BroadcastChannel 本身不提供
BroadcastChannel 是明文广播通道，**没有任何内置安全机制**。如果传输敏感信息（如 token、用户资料），必须自行加密：
- 推荐用
crypto.subtle.encrypt()+ AES-GCM（带认证），密钥可由登录态派生（如 HKDF + 用户 token + salt） - 务必添加时间戳和随机 nonce，防止重放攻击；接收方需校验时间差（如 ±30 秒内）
- 不要把密钥硬编码或存在
localStorage；sessionStorage 更合适（仅当前会话可见），或每次生成临时密钥对 - 若需指定目标页面（而非广播给所有页），
BroadcastChannel不适用，应改用postMessage+ iframe 中转或 SharedWorker
真正容易被忽略的是：**频道名一旦创建，就无法动态修改；不同频道之间完全隔离，且浏览器不会主动回收已关闭但未 close() 的实例**。这意味着上线后改频道名，旧标签页仍会监听老频道，新旧逻辑并存一段时间 —— 必须配合版本号字段（如 { version: 2, data: {...} }）做兼容处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
