浏览器多窗口同开一页面，数据同步更新（纯前端方案）

项目场景：

在项目开发中，经常会遇到一个常见场景：用户在浏览器中将同一个列表页面打开了两个窗口（或标签页），当其中一个窗口新增、编辑或删除数据后，另一个窗口的列表数据却无法自动同步，需要手动刷新页面才能看到最新数据。这种体验显然不够友好，尤其在数据监控类项目中，实时同步数据是提升用户体验的关键。

传统方案：

手动刷新：体验差，用户容易遗漏最新数据；
WebSocket：需要后端配合搭建长连接，对于简单需求来说过重，增加开发和维护成本；
轮询：频繁请求接口，浪费资源，且存在延迟；
后端推送（SSE）：同样需要后端改造，不适用于纯前端场景或快速迭代需求。

解决方案：

localStorage 跨窗口事件监听

浏览器的 localStorage 有一个特性：当一个窗口对 localStorage进行修改（新增、修改、删除键值对）时，会触发其他所有打开同一域名页面的窗口的 storage 事件（本窗口不会触发）。

javascript 复制代码

//通知所有窗口刷新列表
localStorage.setItem("refreshList", Date.now() + "");

//监听其他窗口的消息
window.addEventListener("storage", (e)=>{
  // 只有 key = refreshList 才触发
  if (e.key === "refreshList") {
    console.log("其他窗口新增了数据，我要刷新列表");
  }
});

避坑重点：

1.localStorage 特性限制：storage 事件仅在其他窗口修改 localStorage 时触发，本窗口修改不会触发。这正好符合我们的需求（本窗口操作后，自己已经更新了数据，无需再触发刷新）。

2. 避免重复触发：localStorage 的值如果没有变化，不会触发 storage 事件。因此，我们用 Date.now().toString() 生成唯一值，确保每次操作都能触发事件。

3. 移除监听，避免内存泄漏：在组件卸载（onUnmounted）时，必须移除 storage 事件监听，否则会导致内存泄漏，尤其在单页应用中，路由切换后监听仍会存在。

4. key 命名规范：建议给监听的 key 加上项目前缀（如 myProject_refreshList），避免与其他项目或浏览器插件的 localStorage 键冲突。

5. 跨域限制：localStorage 受同源策略限制，只有同一域名、同一协议、同一端口的窗口，才能监听到彼此的 storage 事件。如果是跨域窗口，需改用其他方案（如 WebSocket）。