跳到主要内容

· 阅读需 7 分钟

  近日有同事遇到了跨页面通信的问题，具体需求是A页面通过 window.open 打开一个新的浏览器页签B页面，在B页面操作完数据后，需要通知到A页签的页面中更新制定的数据。

  后来通过，由于之前项目中接触到了window.opener的特性。故而以此方式简单的解决了。后来找了网上之类的例子，发现大家的解决方式五花八门，结合已有的经验及其他人的例子，故而加以整理他们的优缺点。 像那种通过多种方式组合的方式达到跨页面通信的方式不在整理之列，本文只整理了单纯通过自身就可以达到跨页面通信的方法

名称是否可跨域是否可以双向通信是否会触发同页面监听方法｜
LocalStorage🚫✅🚫

一、通过本地存储的方式

  1. LocalStorage：存储机制允许页面在同一浏览器中存储数据，并可以通过事件监听来实现跨页面通信。

    localStorage.setItem('myKey', Math.random() + '');
    let setItemEvent = new Event("setItemEvent");

    window.addEventListener('storage', function (e) {
     console.log(222);
     if (e.key === 'myKey') {
       console.log(`LocalStorage 变化：键名 ${e.key} 从 ${e.oldValue} 变为 ${e.newValue}（来自页面 ${e.url}）`);
     }
    });

  2. Cookies：可以使用浏览器的 Cookie 来共享少量数据。但 Cookie 有大小限制，而且每次请求都会携带 Cookie 数据。 Cookies with Mutation Observer：结合 MutationObserver 可以在同一域名下的不同页面之间使用 Cookie 来实现实时通信。MutationObserver 用于监视 DOM 树的变化，可以用来检测 Cookie 值的变化。

  3. IndexedDB：IndexedDB 是浏览器的本地数据库，可以在不同页面之间存储和检索数据。虽然主要用于数据存储，但也可用于实现基于事件的通信。

  4. LocalStorage 事件监听器：您可以使用 window.addEventListener 来监听 storage 事件，这个事件会在同一域名下的不同窗口或标签页之间共享LocalStorage 数据时触发。

    window.addEventListener('storage', function (e) {
     if (e.key === 'myKey') {
       // 处理数据变化
     }
    });

5. SessionStorage + StorageEvent：与LocalStorage类似，SessionStorage也可以用于在同一浏览器会话中的不同页面之间共享数据。通过监听StorageEvent，您可以捕获数据的变化。


# 二、通过浏览器server


# 三、其他方式

Window.postMessage()：postMessage 方法允许在不同窗口或标签页之间安全地发送消息。这种方式适用于跨源通信，但需要接收方明确地监听消息并进行处理。

Broadcast Channel API：这是一个新的浏览器 API，用于在不同窗口、标签页或 iframe 之间进行广播通信。它允许在一个页面中发送消息，然后在其他页面中监听并响应这些消息。

Shared Worker：Shared Worker 是一个多页面共享的 Web Worker，允许多个页面在同一个 Worker 中运行脚本，从而进行跨页面通信。

Server-Sent Events (SSE)：SSE 允许服务器向客户端推送事件。不同页面可以通过 SSE 与服务器建立连接，以接收实时事件通知。

WebSocket：WebSocket 允许建立全双工通信通道，可以在不同页面之间进行双向通信。它通常用于实时聊天应用程序等场景。

iframe 通信：如果您在同一页面内使用不同的 iframe，可以通过 window.parent 或 window.frames 来访问其他 iframe 的上下文，并进行通信。

WebRTC DataChannel：如果需要点对点或多对多通信，WebRTC DataChannel 提供了实时数据通信的能力，可以用于浏览器之间的跨页面通信。

Service Workers：Service Workers 是一种在浏览器后台运行的 JavaScript Worker，可以拦截和处理网络请求。虽然它们通常用于离线支持和缓存，但也可以用于在页面之间共享数据。

Local Events：您可以使用浏览器的事件系统来实现跨页面通信。通过在一个页面上触发自定义事件，并在其他页面上监听这些事件，可以实现消息传递。

URL 参数：您可以通过在URL中传递参数来实现页面之间的数据传递。这适用于简单的信息传递，但不适合大量数据。

Cookies + AJAX/Fetch：结合使用Cookie和AJAX或Fetch API，您可以在页面之间发送数据请求和响应，从而实现跨页面通信。

SharedArrayBuffer：这是一个高级的Web API，允许在不同页面之间共享内存，但需要小心处理，因为它可能涉及到安全风险。

PostgreSQL/IndexedDB Realtime Sync：如果您的应用程序使用数据库，可以考虑使用PostgreSQL的实时通知或IndexedDB的变化事件，以便在数据变化时通知不同页面。