在浏览器背面使window.history.state为null的可能情况是什么？

Question

我的网站查询字符串网址如下：

?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1

当用户转到下一页（从第1页到第2页）时：

1. 我们显式地增加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 

2. 然后，我将两者都推送到窗口历史记录以更改URL并保存以前的内容以供浏览器使用：

    window.history.pushState(oldQS, null, newQS); 

3. 完成此操作后，当我在page2上时，我检查window.history.state 。 它存储了我以前的状态：

    ?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1 

4. 我从第2页按浏览器回到第1页。 我在上面设置了一个断点：

    $(window).on('popstate', function(e) { console.log(e.originalEvent.state) }); 

   e.originalEvent.state为null 。

观察：

• 我在page2上时， window.history.state不为null并存储正确的值。
• 当我单击浏览器后，它将获得null值。

到目前为止，我所做的是：

（没有用。）

• 在hashchange事件上设置断点，但没有帮助，因为URL中没有＃。

• 在我的Javascript代码上的每个window.history函数pushState()例如pushState() ， replaceState()上都设置断点，但是当我按下浏览器时，没有一个命中。

我不知道要查看的所有其他位置/功能可能会将window.history.state更改为null 。

如何通过单击浏览器来弄清它变为空的方式和位置？

Answer 1

您询问：

我不知道要查看的所有其他位置/功能可能会将window.history.state更改为null。

如何通过单击浏览器来弄清它变为空的方式和位置？

让我们阅读W3C HTML5规范：

5.5.2历史记录界面

...

历史记录界面的状态属性必须返回用户代理设置的最后一个值。 最初，其值必须为null。

结论：加载文档时， history.state最初为null 。

5.6.10历史遍历

当需要用户代理将历史记录遍历到指定的条目时，用户代理必须采取以下行动。

...

10. 如果该条目是状态对象条目，则让state为该状态对象的结构化克隆。 否则，让state为null。

...

12. 如果指定条目的文档具有最新条目，并且该条目不是指定条目，则将state更改为true； 否则让它是假的。

...

14. 1. 如果状态更改为true，请使用PopStateEvent接口在Document的Window对象上以名称popstate触发可信事件，并将state属性初始化为state的值。 [...]

结论：当导航回到加载文档的状态时，由popstate事件触发的状态为null 。