带你读《现代Javascript高级教程》二十一、前端跨页面通信：实现页面间的数据传递与交互（2）

带你读《现代Javascript高级教程》二十一、前端跨页面通信：实现页面间的数据传递与交互（1）https://developer.aliyun.com/article/1349531?groupCode=tech_library

4. 前端跨页面通信的实现方法

在前端中，有多种方法可以实现跨页面通信。下面介绍几种常用的实现方法：

1） Cookie

Cookie是一种在浏览器中存储数据的机制，可以通过设置Cookie的值在不同页面之间传递数据。通过设置相同的Cookie名称和值，不同的页面可以读取和修改Cookie的值，实现跨页面数据的传递和共享。

使用Cookie进行跨页面通信的示例代码如下：

// 在页面 A 中设置 Cookie
document.cookie = "data=example";
// 在页面 B 中读取 Cookieconst cookies = document.cookie.split("; ");for (let i = 0; i < cookies.length; i++) {
  const [name, value] = cookies[i].split("=");
  if (name === "data") {
    console.log(value); // 输出 "example"
    break;
  }}

2） LocalStorage 和 SessionStorage

LocalStorage和SessionStorage是浏览器提供的本地存储机制，可以在不同页面之间存储和读取数据。它们的区别在于数据的生命周期，LocalStorage中的数据在浏览器关闭后仍然保留，而SessionStorage中的数据在会话结束后被清除。

使用LocalStorage进行跨页面通信的示例代码如下：

// 在页面 A 中存储数据到 LocalStorage
localStorage.setItem("data", "example");
// 在页面 B 中读取 LocalStorage 的数据const data = localStorage.getItem("data");
console.log(data); // 输出 "example"

3） Broadcast Channel

Broadcast Channel是浏览器提供的API，用于在不同页面之间进行消息广播和接收。通过Broadcast Channel，我们可以创建一个频道，并在不同的页面之间发送和接收消息。

使用Broadcast Channel进行跨页面通信的示例代码如下：

// 在页面 A 中创建 Broadcast Channelconst channel = new BroadcastChannel("myChannel");
// 在页面 B 中监听消息
channel.addEventListener("message", (event) => {
  console.log(event.data); // 输出接收到的消息});
// 在页面 A 中发送消息
channel.postMessage("Hello from Page A");

4） Window.postMessage

Window.postMessage是浏览器提供的API，用于在不同窗口或框架之间进行安全的跨页面通信。通过Window.postMessage，我们可以向其他窗口发送消息，并接收其他窗口发送的消息。

使用Window.postMessage进行跨页面通信的示例代码如下：

// 在页面 A 中发送消息给页面 B
window.opener.postMessage("Hello from Page A", "https://www.example.com");
// 在页面 B 中监听消息
window.addEventListener("message", (event) => {
  if (event.origin === "https://www.example.com") {
    console.log(event.data); // 输出接收到的消息
  }});

5. 参考资料

• MDN Web Docs - Window.postMessage()open in new window
  
• MDN Web Docs - BroadcastChannelopen in new window
  
• MDN Web Docs - Cookieopen in new window
  
• MDN Web Docs - Web Storage APIopen in new window
  
• Using the Broadcast Channel API for JavaScript communication between tabsopen in new window
  
• Cross-window communication using postMessageopen in new window
  
• Window Communication in JavaScript: A Comprehensive Guide