pushState() 在 beforeunload 上不起作用，popState() 在加载时不起作用，History API答案

【问题标题】：pushState() not working on beforeunload, popState() not working on load, History APIpushState() 在 beforeunload 上不起作用，popState() 在加载时不起作用，History API
【发布时间】：2017-08-01 18:53:09
【问题描述】：

我有一个网站。主页由各种内容部分组成，当单击某些按钮时会淡入和淡出。我只是想在用户点击页面时推送两个包含相关状态信息的重要对象的状态。这样，当他们返回时，会显示正确的内容并突出显示正确的按钮。我在页面卸载之前这样做：

    window.addEventListener("beforeunload", function () {
        history.pushState(nodeContainer, '', currNode.contentId);
        history.pushState(currNode, '', currNode.contentId);
      return;
    });

当页面重新加载时，我像这样调用 popstate 方法：

    window.addEventListener('popstate', function(e) {
        console.log('Event ', e);
    });

但是，这不起作用。 popstate 方法仅在单击两次返回空状态对象时调用。我知道关于 SO 的类似问题，并且已经完成了我的研究。没有帮助。

【问题讨论】：

标签： javascript jquery html browser-history

【解决方案1】：

beforeUnload 只会处理同步请求。您需要找到一种方法来阻止事件循环。我过去曾使用它向服务器发送同步请求，以检查用户是否正在下载文件，并警告他们离开会停止下载。

如果浏览器认为代码会导致弹出窗口，它也有可能忽略代码。

【讨论】：

所以我能够将 pushState 函数移动到另一个逻辑位置，但我仍然在返回页面刷新并且需要另一个页面返回来获取 popstate（它已成功存储对象）。
我确定你现在在做什么。你是关闭页面，然后重新打开它，然后尝试使用相同的 html 状态？推送状态对于单页应用程序来说非常强大，您只需加载一次 index.html。
你知道吗，我认为我没有正确使用历史 API。我需要做的是在导航到子页面（不同的 html 文件）之前保留对象的状态，以便当我导航回它（通过单击返回）时，它可以被重置。

【解决方案2】：

您可能正在寻找History.replaceState()。这将允许您向当前历史记录条目添加额外数据。每次调用History.pushState() 都会在您的历史堆栈中创建一个新的页面导航。这就是为什么您需要在到达正确的页面之前进行多次导航。

此外，popstate 事件只会在您在页面已加载的情况下进行导航时调用。因此，您需要在页面加载期间阅读History.state。这样您就可以在初始化页面时检查是否有可以使用的状态数据。

【讨论】：