JavaScript 的 Set 无法跨标签页共享，必须结合 localStorage、BroadcastChannel 等浏览器 API 实现多标签页 URL 去重；Set 仅作本地缓存或单页判重工具。
用 JavaScript 的 Set 实现多标签页浏览记录去重，核心是让多个标签页共享同一份去重后的 URL 记录。但要注意：普通 Set 是内存变量，无法跨标签页自动同步 —— 它只在当前页面生效。真正实现“多标签页去重”，必须结合浏览器提供的跨页面通信机制（如 localStorage + storage 事件、SharedWorker 或 BroadcastChannel），再用 Set 在本地做逻辑处理。
用 localStorage + Set 管理跨标签页唯一访问记录
这是最兼容、最常用的方式：所有标签页监听 localStorage 变更，并用本地 Set 缓存当前已知的 URL 列表，避免重复写入或重复处理。
- 每次访问新页面时，先读取
localStorage中已有的 URL 列表（JSON 字符串），转为Set实例 - 检查当前 URL 是否已在
Set中；若不存在，则添加进Set，再写回localStorage - 监听
window.addEventListener('storage', ...)，当其他标签页修改了localStorage，本页就重新同步Set内容
用 BroadcastChannel 实现实时协同（推荐现代项目）
BroadcastChannel 允许同源标签页直接发消息，延迟低、无需序列化/解析，配合 Set 更轻量高效。
- 创建一个频道（如
new BroadcastChannel('page-visit')） - 每个标签页维护自己的
Set记录已访问 URL，并在跳转时调用channel.postMessage({ url: location.href }) - 监听
message事件，收到其他页消息后，把url加入本地Set；同时可主动过滤重复消息（比如用时间戳+URL 去重） - 注意：需处理页面卸载前关闭频道（
channel.close()），避免内存泄漏
避免常见陷阱：Set 本身不解决跨页问题
很多人误以为声明一次 const visited = new Set() 就能全局去重 —— 实际上每个标签页都有独立 JS 执行环境，Set 实例完全隔离。
立即学习“Java免费学习笔记（深入）”；
-
Set是纯前端数据结构，不自带持久化或通信能力 - 仅靠
Set可用于单页内快速判重（例如 SPA 路由切换时防止重复 push） - 跨页场景下，它只是“本地缓存层”或“临时计算工具”，真正的状态同步必须依赖浏览器 API
简易示例：基于 BroadcastChannel 的去重记录
以下代码可在各标签页运行，自动维护一份去重的浏览历史（仅内存，刷新丢失；如需持久化可叠加 localStorage）：
const channel = new BroadcastChannel('nav-history');
const visited = new Set();
// 启动时尝试从 localStorage 恢复（可选）
const saved = localStorage.getItem('visitedUrls');
if (saved) {
JSON.parse(saved).forEach(url => visited.add(url));
}
// 监听其他标签页广播
channel.addEventListener('message', e => {
if (e.data?.url && !visited.has(e.data.url)) {
visited.add(e.data.url);
}
});
// 当前页访问新 URL 时广播
function recordVisit(url) {
if (!visited.has(url)) {
visited.add(url);
channel.postMessage({ url });
localStorage.setItem('visitedUrls', JSON.stringify([...visited])); // 持久化
}
}
// 示例：监听路由变化（如使用 History API）
window.addEventListener('popstate', () => recordVisit(location.href));
// 或监听页面加载
recordVisit(location.href);
