🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

開篇小劇場：為什麼標籤頁要"聊天"？

想象你在網上商城：

標籤1：瀏覽商品頁
標籤2：開着購物車

當你在標籤1點擊"加入購物車"，標籤2的購物車數字應該立即+1！這就是標籤頁通信的魔力啦！✨

🎨 方案1：BroadCast Channel（對講機頻道）
🛠️ 方案2：Service Worker（隱形郵差）
📦 方案3：LocalStorage（共享小本本）
👨‍💻 方案4：Shared Worker（共享辦公室）
🕵️‍♂️ 方案5-6：輪詢偵查隊（IndexedDB/Cookie）
👨‍👦 方案7：window.open（父子悄悄話）
🌐 方案8：WebSocket（專業電話線）
🧩 方案9：SharedArrayBuffer（共享黑板）

🎨 方案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); // 線程安全寫入

🚧 注意：

需要設置安全響應頭
適合高性能計算