跨标签页通信（六）：Cookie

bicheng/2025/10/1 6:51:09/文章来源:href="https://blog.51cto.com/u_17072679/14109412" target="_blank"

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

一、什么是 Cookie？

Cookie 是一种存储在用户浏览器中的小型文本文件，用于存储用户会话信息。Cookie 的主要用途是跟踪用户的行为和偏好设置。每个 Cookie 都有一个名称和一个值，通常由服务器在响应中设置，并由浏览器存储在用户的设备上。

（一）特点

简单易用：API 简洁，易于上手。
同源限制：所有存储的 Cookie 必须在同源页面之间访问。
存储容量：Cookie 的存储空间有限，通常不超过 4KB。

（二）适用场景

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

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

通过定时器轮询的方式，我们可以监听 Cookie 的变化，从而实现跨标签页的通信。这种方法虽然简单，但在某些场景下非常有效。

（一）设置 Cookie

在页面一中设置一个 Cookie，存储需要共享的数据。

<!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 () {document.cookie = `message=${content.value}; path=/;`;};</script>
</body>
</html>

（二）监听 Cookie 变化

在页面二中，通过定时器轮询的方式监听 Cookie 的变化。

<!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>let cookie = document.cookie;console.log(`当前的 Cookie 值为：${cookie}`);setInterval(function () {const currentCookie = document.cookie;if (currentCookie !== cookie) {console.log(`Cookie 有更新，最新的值为：${currentCookie}`);cookie = currentCookie;}}, 1000);</script>
</body>
</html>