🎨 方案1：BroadCast Channel（对讲机频道）
🛠️ 方案2：Service Worker（隐形邮差）
📦 方案3：LocalStorage（共享小本本）
👨💻 方案4：Shared Worker（共享办公室）
🕵️♂️ 方案5-6：轮询侦查队（IndexedDB/Cookie）
👨👦 方案7：window.open（父子悄悄话）
🌐 方案8：WebSocket（专业电话线）
🧩 方案9：SharedArrayBuffer（共享黑板）
今天我们要去探索"跨标签页通信"这个神奇的乐园！🚀
🌟 开篇小剧场：为什么标签页要"聊天"？
想象你在网上商城：
标签1：浏览商品页
标签2：开着购物车
当你在标签1点击"加入购物车"，标签2的购物车数字应该立即+1！这就是标签页通信的魔力啦！✨
🎨 方案1：BroadCast Channel - 对讲机频道
// 所有标签页加入同一个"频道"
const channel = new BroadcastChannel('shop_channel');
// 标签1发送消息
channel.postMessage({ action: 'addToCart', item: '可爱猫猫' });
// 标签2接收消息
channel.onmessage = (event) => {
console.log('收到消息:', event.data);
// 显示："收到消息: {action: "addToCart", item: "可爱猫猫"}"
};
📌 特点：
就像一群人在同一个对讲机频道聊天
现代浏览器都支持（IE除外😅）
适合频繁通信
🛠️ 方案2：Service Worker - 隐形邮差
// service-worker.js
self.addEventListener('message', (event) => {
// 告诉所有标签页
self.clients.matchAll().then(clients => {
clients.forEach(client => client.postMessage(event.data));
});
});
// 标签页代码
navigator.serviceWorker.onmessage = (event) => {
console.log('邮差送来消息:', event.data);
};
// 发送消息
navigator.serviceWorker.controller.postMessage('快递到啦！');
🎯 适用场景：
PWA应用（比如离线可用的网页）
需要后台同步的场景
📦 方案3：LocalStorage - 共享小本本
// 标签1写下留言
localStorage.setItem('message', '今晚吃火锅！');
// 标签2监听小本本变化
window.addEventListener('storage', (event) => {
if (event.key === 'message') {
console.log('新留言:', event.newValue);
}
});
⚠️ 注意：
当前标签页修改不会触发自己的监听
容量约5MB（能写很多小纸条啦）
👨💻 方案4：Shared Worker - 共享办公室
// shared-worker.js
const ports = []; // 连接的所有标签页
onconnect = (e) => {
const port = e.ports[0];
ports.push(port);
port.onmessage = (event) => {
// 广播给其他同事
ports.forEach(p => p !== port && p.postMessage(event.data));
};
};
// 标签页代码
const worker = new SharedWorker('shared-worker.js');
worker.port.onmessage = (event) => {
console.log('办公室通知:', event.data);
};
worker.port.postMessage('大家好呀！');
💡 比喻：
就像多个标签页在一个共享办公室工作
通过中间的worker传递消息
🕵️♂️ 方案5-6：轮询侦查队（IndexedDB/Cookie）
// 方案5：IndexedDB轮询
setInterval(() => {
db.get('message').then(val => {
if (val !== lastMessage) {
console.log('发现新消息:', val);
lastMessage = val;
}
});
}, 1000);
// 方案6：Cookie轮询
setInterval(() => {
const msg = getCookie('message');
if (msg !== lastMsg) {
console.log('Cookie消息:', msg);
lastMsg = msg;
}
}, 1000);
🚨 注意：
像不断检查信箱的侦查员
不推荐高频使用（耗电耗资源）
👨👦 方案7：window.open - 父子窗口说悄悄话
// 父窗口
const child = window.open('child.html');
child.postMessage('乖儿子', 'https://same-origin.com');
// 子窗口
window.opener.postMessage('老爸好！', 'https://same-origin.com');
// 两边都要监听
window.addEventListener('message', (event) => {
if (event.origin !== 'https://same-origin.com') return;
console.log('收到:', event.data);
});
🔒 安全第一：
必须验证event.origin！
就像只接收认识的人的信件
🌐 方案8：WebSocket - 专业电话线
// 所有标签页连接同一个WebSocket
const socket = new WebSocket('wss://example.com/chat');
socket.onmessage = (event) => {
console.log('服务器通知:', event.data);
};
// 发送消息
socket.send('标签1发来的消息');
🏆 优势：
实时性最强
适合需要服务器参与的复杂场景
🧩 方案9：SharedArrayBuffer - 共享黑板（高级）
// 主线程
const buffer = new SharedArrayBuffer(1024);
const arr = new Int32Array(buffer);
// 可以传递给Worker
worker.postMessage({ buffer });
// Worker中修改
Atomics.store(arr, 0, 123); // 线程安全写入
🚧 注意：
需要设置安全响应头
适合高性能计算
🎓 选择指南
| 方案 | 适合场景 | 难度 | 实时性 | 记忆口诀 |
|---|---|---|---|---|
| BroadcastChannel | 简单现代应用 | ⭐ | ⭐⭐⭐ | "对讲机聊天" |
| LocalStorage | 少量数据同步 | ⭐ | ⭐⭐ | "共享小本本" |
| SharedWorker | 复杂数据共享 | ⭐⭐⭐ | ⭐⭐⭐ | "共享办公室" |
| Service Worker | PWA/离线应用 | ⭐⭐ | ⭐⭐⭐ | "隐形邮差" |
| WebSocket | 需要服务器参与 | ⭐⭐ | ⭐⭐⭐ | "专业电话线" |
| window.postMessage | 特定窗口通信 | ⭐⭐ | ⭐⭐⭐ | "父子悄悄话" |
实际项目选择建议：
1 先试试BroadcastChannel（最简单）
2 需要离线功能？上Service Worker
3 大量数据共享？SharedWorker等着你
4 要兼容IE？只能用localStorage啦
记住：没有最好的方案，只有最合适的方案！就像选择工具一样，用对场景最重要~
彩蛋→_→：推荐emoji表情大全
