跨标签页通信（三）：Web Storage

在现代 Web 应用中，跨标签页通信的需求越来越普遍。无论是实现多标签页之间的数据同步，还是构建实时协作功能，跨标签页通信都能极大地提升用户体验。今天，我们将探讨一种简单而高效的实现方式：Web Storage。

一、什么是 Web Storage？

Web Storage 是一种在浏览器中存储数据的机制，它提供了两种存储方式：localStorage 和 sessionStorage。这两种存储方式的主要区别在于数据的持久性和作用域。

localStorage：数据存储在浏览器中，直到手动清除，适用于长期存储数据。
sessionStorage：数据存储在当前会话中，关闭浏览器标签页后数据会自动清除，适用于临时存储数据。

（一）特点

简单易用：API 简洁，易于上手。
同源限制：所有存储的数据必须在同源页面之间访问。
存储容量 ：localStorage 通常有 5MB 的存储空间，sessionStorage 的存储空间较小。

（二）适用场景

数据共享：在多个标签页之间共享数据。
状态同步：同步用户在多个标签页中的操作状态。
临时存储：存储用户在当前会话中的临时数据。

二、使用 Web Storage 实现跨标签页通信

（一）`localStorage` 的 `onstorage` 事件

localStorage 提供了一个 onstorage 事件，当存储的数据发生变化时，会触发该事件。这个事件可以用来实现跨标签页通信。

示例代码

页面一：设置数据

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面一</title>
</head>
<body>
    <input type="text" id="content" placeholder="请输入消息">
    <button id="btn">发送消息</button>
    <script>
        const content = document.querySelector("#content");
        const btn = document.querySelector("#btn");

        btn.onclick = function () {
            localStorage.setItem("message", content.value);
        };
    </script>
</body>
</html>

页面二：监听数据变化

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面二</title>
</head>
<body>
    <script>
        window.onstorage = function (e) {
            if (e.key === "message") {
                console.log("接收到消息:", e.newValue);
            }
        };
    </script>
</body>
</html>

（二）效果

打开两个标签页，分别加载页面一和页面二。
在页面一中输入消息并点击"发送消息"按钮。
页面二的控制台会立即打印出接收到的消息。

（三）`sessionStorage` 的使用

sessionStorage 也可以用来实现跨标签页通信，但它的作用域仅限于当前会话。如果需要在多个标签页之间共享数据，建议使用 localStorage。

三、注意事项

（一）同源限制

Web Storage 只能在同源页面之间使用。如果页面的协议、域名或端口不同，存储的数据将无法共享。

（二）存储容量

虽然 localStorage 提供了较大的存储空间，但仍然有限制。如果存储的数据过多，可能会导致存储失败。

（三）性能影响

虽然 Web Storage 的性能开销较小，但在高频率读写数据时，仍需注意对性能的影响。

跨标签页通信（三）：Web Storage