在多个选项卡上同时使用相同数据更新 LocalStorage 会导致问题答案

【问题标题】：Updating LocalStorage with the same data in the same time on multiple tabs causing problems在多个选项卡上同时使用相同数据更新 LocalStorage 会导致问题
【发布时间】：2023-02-06 17:49:30
【问题描述】：

首先，我是一名初学者前端开发人员，而且我不是以英语为母语的人，对于我在第一个问题中犯的任何错误，我深表歉意：D 我正在从事由其他人启动的 Vue 项目。它使用 websocket 显示来自服务器的一些通知，我发现了一个与此相关的错误。通知存储在使用 VueUse 的 useStorage 从 localStorage 中提取数据的对象中：

const state = reactive({
  liveNotifications: useStorage("liveNotifications", []),
  notificationsCount: 0,
});

当从 ws 接收到数据时，它被添加到数组的开头，如下所示：

connections.alerts.onmessage = (event) => {
    const data = JSON.parse(event.data);

    if (data?.status) {
      return;
    }

    state.liveNotifications.unshift(data);
    state.notificationsCount += 1;
  };

问题是，当打开超过 2 个选项卡并发送一些通知时，localstorage 开始表现得很奇怪，就像它试图一遍又一遍地添加相同的对象并且 notificationsCount 正在（例如）从 2 跳到 3，反之亦然。有什么办法吗？如果 ws 提供的数据在所有选项卡上都相同，则防止应用程序多次更新 localstorage。或者也许还有另一种方法可以使它正常工作？

我已经尝试了一些来自网络的解决方案，但老实说，我不太确定为什么会这样，而且我不知道我到底应该寻找什么，所以如果有人比我有更好的知识并且可以帮助我理解我我是来学习的:)

【问题讨论】：

标签： javascript vue.js websocket frontend local-storage

【解决方案1】：

问题是：两个选项卡都将读取/写入同一个“文件”。

窗口界面的 localStorage 只读属性允许您访问 Document 来源的 Storage 对象；存储的数据跨浏览器会话保存。

MDN - Window.localStorage

建议here改为使用sessionStorage：

[...] 不同之处在于，虽然 localStorage 中的数据不会过期，但 sessionStorage 中的数据会在页面会话结束时被清除。

每当在浏览器的特定选项卡中加载文档时，都会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对该特定选项卡有效。

【讨论】：