【前端面经】JS-前端有哪些实现跨⻚面通信的方法?

在实际开发中，我们经常需要在不同的页面之间进行数据传递和通信。下面，我们将通过一些简单的例子来演示如何使用不同的跨页面通信方法。

1. Cookie

假设我们需要在两个页面间共享用户的登录信息。我们可以在用户登录成功后，将用户的登录信息存储在 Cookie 中，然后在另一个页面中读取 Cookie，以获取用户的登录状态。以下是存储和读取 Cookie 的示例代码：

// 存储 Cookie
document.cookie = "username=John Doe";

// 读取 Cookie
const cookieValue = document.cookie.replace(/(?:(?:^|.*;\\s*)username\\s*\\=\\s*([^;]*).*$)|^.*$/, "$1");
console.log(cookieValue); // "John Doe"

1. localStorage 和 sessionStorage

假设我们需要在两个页面之间共享用户的个人信息。我们可以在一个页面中将用户的个人信息存储在 localStorage 中，然后在另一个页面中读取 localStorage，以获取用户的个人信息。以下是存储和读取 localStorage 的示例代码：

// 存储数据到 localStorage
localStorage.setItem("user", JSON.stringify({ name: "John Doe", age: 30 }));

// 从 localStorage 中读取数据
const user = JSON.parse(localStorage.getItem("user"));
console.log(user.name); // "John Doe"

1. BroadcastChannel API

假设我们需要在多个页面之间共享同一个计数器。我们可以使用 BroadcastChannel API，在一个页面中发送计数器的值，然后在其他页面中接收计数器的值。以下是发送和接收消息的示例代码：

// 发送消息
const channel = new BroadcastChannel("counter");
channel.postMessage({ count: 1 });

// 接收消息
const channel = new BroadcastChannel("counter");
channel.onmessage = (event) => {
  console.log(event.data.count); // 1
};

1. SharedWorker

假设我们需要在两个页面之间共享同一个数据对象。我们可以使用 SharedWorker，在两个页面中都创建一个 SharedWorker，然后通过 postMessage API，在两个页面间传递数据。以下是发送和接收消息的示例代码：

// 创建 SharedWorker
const worker = new SharedWorker("worker.js");

// 发送消息
worker.port.postMessage({ data: "hello" });

// 接收消息
worker.port.onmessage = (event) => {
  console.log(event.data); // "world"
};

1. postMessage API

假设我们需要在两个页面之间传递数据。我们可以使用 postMessage API，在一个页面中向另一个页面发送消息，然后在另一个页面中接收消息。以下是发送和接收消息的示例代码：

// 发送消息
window.parent.postMessage({ data: "hello" }, "<http://example.com>");

// 接收消息
window.addEventListener("message", (event) => {
  if (event.origin === "<http://example.com>") {
    console.log(event.data); // "world"
  }
});

1. WebSocket

假设我们需要在两个页面之间实现实时通信。我们可以使用 WebSocket，在两个页面和服务器之间建立长连接，然后通过 WebSocket 实现实时通信。以下是建立 WebSocket 连接的示例代码：

// 建立 WebSocket 连接
const socket = new WebSocket("ws://example.com/socket");

// 发送消息
socket.send("hello");

// 接收消息
socket.onmessage = (event) => {
  console.log(event.data);
};

以上是几个常用的前端跨页面通信方法。在实际开发中，我们可以根据具体的需求，选择合适的方法来实现页面间的数据传递和通信。