当前位置：首页 > news >正文

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

news 2025/9/11 11:51:40

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

一、什么是 Web Storage？

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

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

（一）特点

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

（二）适用场景

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

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

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

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

示例代码

页面一：设置数据

<!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>

页面二：监听数据变化

<!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>