前端浏览器跨标签通信方式分享

最新推荐文章于 2025-06-07 15:08:26 发布

原创

最新推荐文章于 2025-06-07 15:08:26 发布 · 1.8k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文探讨了在前端开发中如何利用localStorage、sessionStorage、BroadcastChannel、ServiceWorker、IndexedDB、cookie以及postMessage等技术实现在浏览器标签页之间的数据同步、状态共享和通信。详细介绍了BroadcastChannel的工作原理和使用示例，以及ServiceWorker的注册、生命周期和推送通知功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨标签通信也有很多实际的应用场景，比如：

共享登录状态：当用户在一个标签页中登录后，其他打开的标签页需要及时获取到登录状态，以保持一致的用户体验。在这种情况下，可以使用浏览器的localStorage或sessionStorage来存储登录状态，并通过监听storage事件来实现不同标签页之间的状态同步。
实时通知和消息推送：如果用户在一个标签页上收到了新消息或通知，可以通过跨标签页通信将该消息或通知传递给其他标签页。一种常见的处理方式是使用浏览器的localStorage或IndexedDB来存储未读消息或通知，然后通过监听storage事件或定时轮询来检查新消息或通知的变化。
跨标签页数据共享：有时候需要在不同的标签页之间共享一些数据，例如购物车数据、选项设置等。这可以通过在localStorage或IndexedDB中存储数据，并借助storage事件或定时轮询来实现数据的同步更新。
标签页之间的导航同步：当用户在一个标签页中进行导航操作（例如点击链接或提交表单）时，其他标签页可能也需要跟随导航到相应的页面。这可以通过在标签页之间发送消息或共享状态来实现导航的同步。

在前端中处理浏览器跨标签页通信时，常用的方法包括：

使用localStorage或sessionStorage存储共享数据，并通过监听storage事件来实现数据的变化检测和同步更新。
使用BroadcastChannel API，它提供了一种跨窗口通信的机制，可以在不同标签页之间发送消息。
使用window.postMessage()方法，该方法允许在不同的窗口或标签页之间安全地传递消息。
借助服务端的实时通信技术，如WebSocket，通过服务器作为中介来实现标签页之间的消息传递和数据同步。

浏览器通信方式

每个浏览器标签页通常被视为一个独立的进程，而不是一个线程。这种多进程架构被称之为多进程浏览器，谷歌浏览器就是采用这种方式。

在多进程浏览器中，每个标签页都独立运行在独立的进程中，这样一旦一个标签页崩溃或遇到问题，不会影响其他标签页和浏览器本身的稳定性。而每个进程都有属于自己的内存。

在多进程浏览器中，不同标签页之间的通信是通过进程间通信 IPC 机制来实现的。IPC 是操作系统提供的一种机制，允许不同进程之间交换数据和消息，从而实现协同工作。

在操作系统中，著有有以下几种通信方式：

基于管道的通信：

管道是一种半双工的通信机制，可用于同一父进程与其子进程之间通信，或者用于同一计算机上的不同进程之间通信。
命名管道提供了进程间进行双向通信的能力。可以被多个进程打开和使用。其中一个进程将数据写入管道，而另一个进程则可以从管道中读取这些数据。命名管道通常用于在不相关的进程之间传递数据，比如客户端和服务器之间的通信。
匿名管道是一种用于单向通信的机制，仅用于具有父子关系的进程之间。它只能在创建时通过操作系统提供的机制进行传递。匿名管道在创建时自动建立，并且只能用于具有亲缘关系的进程之间的通信。其中一个进程将数据写入管道的写端，而另一个进程则从管道的读端读取这些数据。

消息队列：消息队列允许进程通过将消息放入队列中来进行通信。进程可以从队列中接收消息，实现异步通信。消息队列适用于不需要直接的点对点连接的场景，而且可以在不同计算机之间通信。
共享内存：共享内存允许多个进程访问同一块物理内存区域，从而实现高效的数据共享。进程可以在共享内存中读写数据，而不需要显式的数据传输操作。
套接字Socket：套接字通信是一种在计算机网络中实现进程间通信的方式。它基于网络协议栈，使用 TCP 或 UDP 等传输层协议，在不同的主机之间进行数据传输和通信。
Remote Procedure Call：RPC 允许一个进程通过网络请求调用另一个进程中的函数，就像调用本地函数一样。远程过程调用隐藏了底层通信细节，使得进程间通信更加方便。
信号（Signal）：信号通信是一种在操作系统中实现进程间通信的机制。它允许一个进程向另一个进程发送信号，用于通知、中断或请求处理等目的。它是一种异步事件，当某个事件发生时，操作系统会向进程发送相应的信号。进程可以事先注册信号处理函数来捕获并处理这些信号。

JavaScript 如何实现跨标签页通信

JavaScript 实现跨标签页通信的方式有很多中，下面将一一介绍。

BroadcastChannel

BroadcastChannel 通信的方式原理就是一个命名管道。它允许让指定的同源下浏览器不同的窗口来订阅它。

每个 BroadcastChannel 对象都需要使用一个唯一的名称来标识通道，这个名称在同一域名下的不同页面之间必须是唯一的。它允许同一域名下的不同页面之间进行通信。

通过 postMessage 方法，一个页面可以将消息发送到频道中，而其他页面则可以监听 message 事件来接收这些消息。通过这种方式是短线了一种实时通信的机制，可以在不同的页面之间传递信息，实现页面间的即时交流。如下图所示：

在这里插入图片描述

BroadcastChannel 的类型定义有如下代码所示：

[Exposed=(Window,Worker)]
interface BroadcastChannel : EventTarget {
   
   
  constructor(DOMString name);

  readonly attribute DOMString name;
  undefined postMessage(any message);
  undefined close();
  attribute EventHandler onmessage;
  attribute EventHandler onmessageerror;
};

要想使用，首先我们创建两个不同的 html 文件分别代表不同的页面，并且使用 live server 开启一个本地服务器：

<!-- a.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const broad = new BroadcastChannel("moment");

      setInterval(() => {
     
     
        broad.postMessage({
     
     
          value: `moment ${ 
       new Date()}`,
        });
      }, 3000);

      broad.onmessage = function (e) {
     
     
        console.log(e.data);
      };
    </script>
  </body>
</html>

<!-- b.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const broad = new BroadcastChannel("moment");
      let index = 1;
      setInterval(() => {
     
     
        broad.postMessage({
     
     
          value: `supper