使用 localStorage 更新另一个选项卡内容并不总是有效

Question

我的网站上有一个页面（第 1 页），其中的内容是通过调用 API 来加载的。

然后我的网站上有另一个页面（第 2 页），它将一些数据发布到 API 中并将一些内容保存到其中。这个新内容应该在页面 #1 中可见，并且在刷新页面 #1 时可见（因为它再次调用 API）。

我想以编程方式更新页面#1上的内容，而不需要刷新页面，当页面#1和页面#2都在用户的浏览器中打开时，因此页面#1不需要刷新看到里面有新内容了。

为此，我想到创建一个 localStorage 项来指定新内容已添加到第 #2 页上的 API：

axios.post(apiURL + "save", 
{
    id: myID,
    data: myData
})
.then(response => {
    localStorage.setItem("update-profile", true); //<-- Here
})
.catch(error => console.log(error));

然后，在第 1 页上，我有一个侦听器，用于检查何时添加 localStorage 项目并重新加载页面内容以进行新的 API 调用：

window.addEventListener("storage", updateProfile);

const updateProfile = () => {
    if (localStorage.getItem("update-profile") !== null) {
        axios.get(apiURL + "get")
        .then(response => updateContent())
        .catch(error => console.log(error));

        localStorage.removeItem("update-profile"); //<-- Removes localStorage item
    }
}

这里的问题是，整个事情在 70% 的情况下都有效。有时，该项目似乎未正确添加到第 2 页上的 localStorage。有什么办法可以解决这个问题，使其 100% 正常工作吗？还有其他更好的技术可以以一致的方式实现这一目标吗？

Answer 1

考虑使用 Broadcast Channel API 以获得更流畅的体验。