刷刷题39（同一组件中的不同的标签页如何实现通信）

实现组件内双标签页通信的常用方法

1. ‌LocalStorage + storage 事件‌‌

javascript 复制代码

// 标签页A发送数据
localStorage.setItem('tabMsg', JSON.stringify({ type: 'update', data: '新内容' }));

// 标签页B监听变化
window.addEventListener('storage', (event) => {
  if (event.key === 'tabMsg') {
    const msg = JSON.parse(event.newValue);
    console.log('收到消息:', msg.data);
  }
});

‌特点‌：

支持跨标签页通信，但‌不会在当前触发页触发事件‌
数据存储容量约5MB，适用于简单状态同步（如用户登录态）

2. ‌BroadcastChannel API‌‌

ini 复制代码

// 两标签页均执行（需同源）
const channel = new BroadcastChannel('tab-channel');

// 标签页A发送消息
channel.postMessage({ action: 'sync', value: 123 });

// 标签页B接收消息
channel.onmessage = (e) => {
  if (e.data.action === 'sync') {
    console.log('同步数据:', e.data.value);
  }
};

‌优势‌：

支持‌双向实时通信‌，传输效率高于LocalStorage
可创建多个独立频道，适用于复杂交互场景（如协同编辑）

3. ‌SharedWorker 共享线程‌‌

ini 复制代码

// 共享线程脚本（shared-worker.js）
onconnect = (e) => {
  const port = e.ports;
  port.onmessage = (msg) => {
    // 向所有连接端口广播消息
    port.postMessage(`转发: ${msg.data}`);
  };
};

// 标签页A/B连接线程
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.postMessage('来自标签页A'); 
worker.port.onmessage = (e) => {
  console.log('收到广播:', e.data);
};

‌适用场景‌：

需要‌长时间维持连接‌的复杂通信（如聊天室、实时协作）
需处理浏览器兼容性问题（部分移动端浏览器支持较差）

4. ‌Window.postMessage 跨窗口通信‌‌

javascript 复制代码

// 标签页A（父窗口）打开标签页B
const childWindow = window.open('tabB.html');

// 向子窗口发送消息
childWindow.postMessage('用户ID: 1001', 'https://yourdomain.com');

// 标签页B接收消息
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://yourdomain.com') return;
  console.log('父窗口消息:', e.data);
});

注意事项‌：

必须验证origin防止跨站攻击
适合‌跨域通信‌，但需明确窗口引用关系

方法对比与选型建议

方法	实时性	数据复杂度	跨域支持	适用场景示例
LocalStorage	中等	简单键值对	同源	主题切换、用户状态同步‌58
BroadcastChannel	高	结构化数据	同源	实时表单协同、多Tab操作日志‌68
SharedWorker	高	复杂数据流	同源	股票行情同步、多Tab数据计算‌6
Window.postMessage	高	结构化数据	支持	跨域单点登录、跨应用通信‌46