我的网站的查询字符串 URL 如下：
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
当用户转到下一页（从第 1 页到第 2 页）时：
-
我们明确增加pn（页码加 1）并将其设置在查询字符串 URL 中。
更改后的查询字符串：
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=2
我还存储了旧的查询字符串，它看起来像：
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
-
然后，我将两者推送到窗口历史记录以更改 URL 并保存以前的内容供浏览器返回：
window.history.pushState(oldQS, null, newQS);
-
完成此操作后，当我在第 2 页时，IN 检查window.history.state。它存储我之前的状态：
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
-
我从 page2 按回浏览器返回到 page1。我在以下位置设置了断点：
$(window).on('popstate', function(e) {
console.log(e.originalEvent.state)
});
e.originalEvent.state is null.
观察结果：
- The
window.history.state is not null当我在第 2 页时，并存储正确的值。
- It gets
null当我单击浏览器返回时的值。
到目前为止我所做的：
（还没有工作。）
放置断点hashchange事件，但没有帮助，因为 URL 中没有 #。
在每个上设置断点window.history在我的 Javascript 代码上运行，例如pushState(), replaceState()但当我按下浏览器时，所有这些都没有受到影响。
我不知道其他所有地方/功能可能会发生变化window.history.state to null.
我怎样才能通过单击浏览器后退来找出它是如何以及在哪里变成空的？
你问：
我不知道其他所有地方/函数可能会将 window.history.state 更改为 null。
我怎样才能通过单击浏览器后退来找出它是如何以及在哪里变成空的？
我们来读一下 W3C HTML5 规范：
5.5.2 历史记录界面 https://www.w3.org/TR/html5/browsers.html#the-history-interface
...
History 接口的状态属性必须返回用户代理设置的最后一个值。最初，它的值必须为空。
结论：当文档加载时，history.state最初是null.
5.6.10 历史遍历 https://www.w3.org/TR/html5/browsers.html#history-traversal
当需要用户代理遍历历史记录到指定条目时，[...]，用户代理必须执行以下操作。
...
- 如果该条目是状态对象条目，则令 state 为该状态对象的结构化克隆。否则，令 state 为空。
...
- 如果指定条目的 Document 具有最新条目，并且该条目不是指定条目，则将状态更改为 true；否则就让它为假。
...
- 如果 statechanged 为 true，则使用 PopStateEvent 接口在 Document 的 Window 对象上触发名为 popstate 的可信事件，并将 state 属性初始化为 state 的值。 [...]
结论：当导航回到文档加载时的状态时，该状态触发了popstate事件是null.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
