你知道的跨页面通信方式都有哪些

半克唆麻
847 阅读7分钟

image.png

一、使用本地存储（LocalStorage and SessionStorage）

以LocalStorage例

使用本地存储（LocalStorage）进行跨页面通信是一种较为常见且相对简单的方法。

1、工作原理

LocalStorage 是浏览器提供的一种在客户端存储数据的机制，它以键值对的形式存储数据，并且数据在同一域名下的不同页面之间是共享的。当一个页面将数据存储到 LocalStorage 中后，其他页面可以通过相同的键来获取该数据，从而实现跨页面通信。

2、具体步骤

  1. 在页面 A 中存储数据：

    • 使用localStorage.setItem('key', 'value')方法将数据存储到 LocalStorage 中。其中，'key' 是你自定义的键名，'value' 是要存储的数据。例如：

         localStorage.setItem('message', 'Hello from Page A!');

  2. 在页面 B 中获取数据：

    • 使用localStorage.getItem('key')方法获取存储在 LocalStorage 中的数据。例如：

         var message = localStorage.getItem('message');
   console.log(message); // 输出：Hello from Page A!

3、注意事项

  1. 数据类型：

    • LocalStorage 只能存储字符串类型的数据。如果要存储复杂的数据结构，如对象或数组，需要先将其转换为字符串，可以使用 JSON.stringify () 方法进行序列化，在获取数据后再使用 JSON.parse () 方法进行反序列化。

         // 存储对象
   var obj = { name: 'John', age: 30 };
   localStorage.setItem('obj', JSON.stringify(obj));

   // 获取对象
   var storedObj = JSON.parse(localStorage.getItem('obj'));
   console.log(storedObj.name); // 输出：John

  2. 存储容量：

    • 不同浏览器对 LocalStorage 的存储容量限制可能不同，但一般来说都比较有限。如果存储的数据量过大，可能会导致存储失败或影响浏览器性能。

  3. 事件监听：

    • 可以通过监听storage事件来实时监测 LocalStorage 的变化。当一个页面修改了 LocalStorage 中的数据时，其他页面可以通过监听这个事件来做出相应的反应。

         window.addEventListener('storage', function(event) {
     if (event.key === 'message') {
       console.log(event.newValue);
     }
   });

使用 LocalStorage 进行跨页面通信具有简单、方便的优点，但也需要注意数据类型、存储容量等问题，以确保通信的稳定和高效。

二、使用 Cookie

使用 Cookie 进行跨页面通信也是一种可行的方法。

1、工作原理

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在后续的请求中被自动发送回服务器或者在同一域名下的不同页面中被读取。通过在一个页面设置 Cookie，其他页面可以读取这个 Cookie 来实现跨页面通信。

2、具体步骤

  1. 在页面 A 中设置 Cookie：

    • 使用document.cookie来设置 Cookie。Cookie 的格式为“键=值; expires=过期时间; path=路径; domain=域名; secure”。例如：

      ```
document.cookie = "message=Hello from Page A!; expires=Thu, 01 Jan 2025 00:00:00 GMT; path=/";
```

    • 这里设置了一个名为“message”的 Cookie，值为“Hello from Page A!”，过期时间为 2025 年 1 月 1 日，路径为根路径（/），表示在该域名下的所有页面都可以访问这个 Cookie。

  2. 在页面 B 中读取 Cookie：

    • 同样使用document.cookie来读取 Cookie。但是document.cookie返回的是一个字符串，包含了所有的 Cookie，需要进行解析。例如：

      ```
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
  var cookie = cookies[i].trim();
  if (cookie.startsWith('message=')) {
    var message = cookie.substring('message='.length);
    console.log(message); // 输出：Hello from Page A!
  }
}
```

    • 这段代码首先将document.cookie分割成单个 Cookie 的数组，然后遍历数组，找到名为“message”的 Cookie，并提取其值。

3、注意事项

  1. 存储容量和数量限制：

    • Cookie 的存储容量通常比较小，一般为 4KB 左右。而且浏览器对每个域名下的 Cookie 数量也有限制。如果存储的数据量过大或 Cookie 数量过多，可能会导致存储失败或影响性能。

  2. 安全性：

    • Cookie 可以被用户篡改，因此不适合存储敏感信息。如果需要存储敏感信息，可以考虑对 Cookie 进行加密或者使用其他更安全的存储方式。

  3. 作用域：

    • 通过设置 Cookie 的path、domain等属性，可以控制 Cookie 的作用域，即哪些页面可以访问这个 Cookie。需要根据实际需求进行合理设置，以确保跨页面通信的准确性和安全性。

使用 Cookie 进行跨页面通信相对简单，但需要注意存储容量、安全性和作用域等问题，以充分发挥其作用。

三、使用 BroadcastChannel API

使用 BroadcastChannel API 进行跨页面通信是一种高效且简洁的方式。

1、工作原理

BroadcastChannel API 允许在不同的浏览器标签页（同域下）之间建立一个通信频道，通过这个频道可以发送和接收消息。每个页面可以创建一个 BroadcastChannel 实例，并通过这个实例向频道发送消息或监听频道上的消息，从而实现跨页面通信。

2、具体步骤

  1. 在页面 A 中创建频道并发送消息：

    • 首先创建一个 BroadcastChannel 实例，并指定一个频道名称：

         const bc = new BroadcastChannel('myChannel');

  • 然后可以使用postMessage方法向频道发送消息：

    ```
   bc.postMessage('Hello from Page A!');
```

  1. 在页面 B 中接收消息：

    • 同样创建一个名为 “myChannel” 的 BroadcastChannel 实例：

         const bc = new BroadcastChannel('myChannel');

  • 然后通过监听message事件来接收消息：

       bc.onmessage = function(event) {
     console.log(event.data); // 输出：Hello from Page A!
   };

3、注意事项

  1. 频道名称的唯一性：

    • 频道名称必须在同域下是唯一的，否则可能会导致消息发送到错误的频道或接收不到消息。

  2. 关闭频道：

    • 当不再需要使用 BroadcastChannel 时，应该调用close方法关闭频道，以释放资源：

         bc.close();

  3. 兼容性：

    • BroadcastChannel API 并不是所有浏览器都完全支持，在使用时需要考虑兼容性问题，可以使用特性检测来判断浏览器是否支持该 API。

BroadcastChannel API 为跨页面通信提供了一种简单而有效的方式，特别适用于需要在多个页面之间进行广播通信的场景。

四、使用窗口间的消息传递（postMessage）

使用窗口间的消息传递（postMessage）进行跨页面通信是一种灵活且安全的方法。

1、工作原理

postMessage方法允许不同源的窗口之间进行安全的通信。可以在一个窗口中向另一个窗口发送消息，并且接收窗口可以通过监听message事件来接收这些消息。通过这种方式，可以实现跨页面通信。

2、具体步骤

  1. 发送消息的页面（页面 A）：

    • 假设页面 A 要向页面 B 发送消息，首先需要获取到页面 B 的窗口对象。如果页面 B 是由页面 A 打开的，可以通过window.open返回的窗口对象来获取；如果页面 B 已经打开，可以通过查找窗口列表或者其他方式找到目标窗口。

         // 打开页面 B
   var targetWindow = window.open('pageB.html', '_blank');
  • 然后使用postMessage方法向页面 B 发送消息，同时指定消息内容和目标窗口的源地址（用于安全验证）：
   targetWindow.postMessage('Hello from Page A!', 'pageB_url');

2. 接收消息的页面（页面 B）：

*   页面 B 需要监听`message`事件来接收来自页面 A 的消息。在事件处理函数中，可以通过`event.origin`来验证消息的来源是否合法，以防止恶意页面的干扰。

           window.addEventListener('message', function(event) {
             if (event.origin === 'pageA_url') {
               console.log(event.data); // 输出：Hello from Page A!
             }
           });

3、注意事项

  1. 安全验证：

    • 一定要对消息的来源进行严格的验证，只接收来自可信源的消息。否则，恶意页面可能会发送虚假消息，导致安全问题。

  2. 消息格式：

    • 发送和接收的消息可以是字符串、对象等多种类型，但需要确保双方对消息的格式有一致的理解。

  3. 兼容性：

    • 不同浏览器对postMessage的支持可能会有所不同，特别是在处理复杂数据类型和跨域通信时。在使用时需要进行充分的测试，确保在各种环境下都能正常工作。
(*￣︶￣) 你还知道哪些通信方式评论区留言咱们讨论讨论
avatar
文章
阅读
粉丝