多标签页之间数据交互

在复杂的 Web 应用中，用户经常需要同时操作多个标签页。例如：在电商网站中修改购物车、在协作工具中同步编辑状态、在新闻平台中标记已读内容。本文将详解 ​5 种主流实现方案。

一、核心需求与技术挑战

1.1 典型应用场景

场景	数据交互需求
电商购物车	多标签页实时同步商品数量
在线协作工具	多人编辑时实时更新文档内容
新闻/社交平台	跨标签页同步消息已读状态
实时监控仪表盘	多个视图同步展示最新数据

1.2 技术难点

• ​实时性：如何保证数据变更在 100ms 内同步？
• ​一致性：如何避免多标签页同时修改导致的数据冲突？
• ​持久化：页面刷新或重启浏览器后如何恢复状态？
• ​兼容性：如何覆盖 IE11 等老旧浏览器？

二、技术方案详解与代码实现

2.1 方案一：BroadcastChannel API（纯前端）

核心原理

• 使用浏览器原生 API 直接建立标签页间通信通道
• ​优点：零依赖、低延迟（同源策略下）
• ​缺点：无法跨设备、IE/旧版 Safari 不支持

// 发送方标签页
const channel = new BroadcastChannel('cart_channel');
channel.postMessage({ action: 'update', itemId: '123', count: 2 });

// 接收方标签页
const channel = new BroadcastChannel('cart_channel');
channel.onmessage = (e) => {
  if (e.data.action === 'update') {
    updateCartUI(e.data.itemId, e.data.count);
  }
};

2.2 方案二：localStorage + StorageEvent

核心原理

• 利用 localStorage 存储共享数据
• 通过 storage 事件监听数据变化
• ​优点：兼容 IE8+、数据自动持久化
• ​缺点：传输效率低（仅字符串）、同源限制

// 写入数据
function syncData(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

// 监听变化
window.addEventListener('storage', (e) => {
  if (e.key === 'cart') {
    const cartData = JSON.parse(e.newValue);
    renderCart(cartData);
  }
});

2.3 方案三：SharedWorker 共享进程

核心原理

• 创建共享 Worker 作为中央消息枢纽
• ​优点：支持跨域通信、适合高频更新场景
• ​缺点：实现复杂度高、Safari 兼容性问题

// shared-worker.js
const ports = [];
onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);
  port.onmessage = (e) => {
    ports.forEach(p => {
      if (p !== port) p.postMessage(e.data);
    });
  };
};

// 业务代码
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.onmessage = (e) => {
  handleDataUpdate(e.data);
};

2.4 方案四：WebSocket + 服务端广播

核心原理

• 通过服务端维护 WebSocket 连接实现跨设备同步
• ​优点：支持离线恢复、跨设备同步
• ​缺点：需要后端开发、服务器成本

// Node.js 服务端
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
const clients = new Set();

wss.on('connection', (ws) => {
  clients.add(ws);
  ws.on('message', (message) => {
    clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

2.5 方案五：Server-Sent Events（SSE）

核心原理

• 基于 HTTP2.0 长连接的单向服务端推送​（Server → Client）
• ​优点：自动重连、天然支持跨域（CORS）、轻量级
• ​缺点：仅支持文本数据、单向通信（客户端需用 XHR 配合）

// 客户端代码（多个标签页独立连接）
const eventSource = new EventSource('/api/sse');

eventSource.onmessage = (e) => {
  const data = JSON.parse(e.data);
  updateCart(data); // 更新本地数据
};

// 服务端示例（Node.js + Express）
app.get('/api/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 模拟每秒推送数据
  const timer = setInterval(() => {
    res.write(`data: ${JSON.stringify(cartData)}\n\n`);
  }, 1000);

  req.on('close', () => clearInterval(timer));
});

三、方案对比矩阵

方案	延迟	跨设备	数据方向	兼容性	适用场景
BroadcastChannel	<50ms	❌	双向	Chrome 54+	同源页面实时协作
localStorage	100ms	❌	双向	IE8+	简单状态同步
SharedWorker	<30ms	✅*	双向	Chrome 4+	高频数据共享
WebSocket	200ms+	✅	双向	IE10+	多端实时交互
​SSE​	500ms+	✅	​单向推送​	IE除外	实时通知、监控

四、最终技术选型

1. ​是否需要服务端参与？
   → 否：选择 BroadcastChannel 或 localStorage
   → 是：进入下一步

2. 数据流向需求？
   → 只需服务端推送：SSE 是最优解​
   → 需要双向通信：WebSocket

3. ​是否要求极低延迟？
   → 是：WebSocket（<200ms）
   → 否：SSE 更节省资源

4. ​是否需要支持 IE？
   → 是：长轮询（long-polling）
   → 否：优先现代方案