過去，最常見的就是利用 localStorage 的 onstorage 事件監(jiān)聽來處理跨瀏覽器標簽頁通信，但其本職是存儲，通信只是其副作用，且 API 不夠直觀。

現(xiàn)代瀏覽器已經(jīng)為我們提供了一個專門為此場景設計的、更優(yōu)雅、更高效的解決方案。

什么是 BroadcastChannel？

BroadcastChannel API 允許來自同源的瀏覽器不同上下文（如標簽頁、窗口、iframe）之間進行通信。

其核心特點是：同源限制、發(fā)布/訂閱模式且角色可以互換、基于消息事件對高效通信、支持復雜數(shù)據(jù)，無需手動序列化。

它的 API 非常簡潔，主要包含創(chuàng)建、發(fā)送、接收和關閉四個步驟。

1. 創(chuàng)建或加入一個頻道

要進行通信，首先需要創(chuàng)建一個 BroadcastChannel 實例，并給它指定一個唯一的頻道名稱。所有希望通信的頁面都必須使用相同的頻道名稱。

// 創(chuàng)建一個名為 'user_status_channel' 的頻道
const channel = new BroadcastChannel('user_status_channel');

如果名為 user_status_channel 的頻道已存在，這行代碼會加入該頻道；如果不存在，則會創(chuàng)建它。

2. 發(fā)送消息

創(chuàng)建實例后，使用 postMessage() 方法向頻道廣播消息。所有監(jiān)聽該頻道的其他標簽頁都會收到此消息。

postMessage() 的強大之處在于它可以發(fā)送各種復雜的數(shù)據(jù)結構，包括對象、數(shù)組、Map、Set、File 對象等，瀏覽器會自動處理序列化和反序列化。

3. 接收消息

通過監(jiān)聽 message 事件來接收廣播。事件對象 event 中包含了我們最關心的 data 屬性，也就是發(fā)送方傳遞的消息。

channel.onmessage = (event) => {
 console.log('收到消息:', event.data);

 // 根據(jù)消息內容執(zhí)行相應操作
 if (event.data && event.data.type === 'login') {
    updateUIForLogin(event.data.user);
  } else if (event.data && event.data.type === 'logout') {
    updateUIForLogout();
  }
};

// 也可以使用 addEventListener
// channel.addEventListener('message', (event) => { ... });

4. 關閉頻道

當頁面不再需要接收或發(fā)送消息時（例如，在組件卸載或頁面關閉時），應該調用 close() 方法來關閉頻道，以釋放資源。

// 當組件銷毀或頁面關閉時
window.onunload = () => {
  channel.close();
};

// 在 React 或 Vue 等框架中，可以在組件的卸載生命周期函數(shù)中調用
// useEffect(() => {
//   return () => channel.close();
// }, []);

BroadcastChannel API 是實現(xiàn)同源跨標簽頁通信的現(xiàn)代化標準方案，具有簡潔的 API、強大的功能和優(yōu)秀的性能，完美地解決了 localStorage hack 方案的各種痛點。

至于兼容性，只要不用 IE 就行。