在浏览器返回时使window.history.state null的可能情况是什么

What are possible cases making window.history.state null on browser back?

本文关键字：null 是什么情况 state history 返回浏览器 window 更新时间：2023-09-26

>我有我网站的查询字符串 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 页上时，我检查window.history.state.它存储我以前的状态：
```
?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
```
我从第 2 页按浏览器返回以返回第 1 页。我放了一个断点：
```
$(window).on('popstate', function(e) {
    console.log(e.originalEvent.state)
});
```
e.originalEvent.state null.

观察：

window.history.state不是null的，当我在第 2 页时存储正确的值。
当我单击浏览器返回时，它会获得null值。

到目前为止我做了什么：

（不起作用。

将断点放在hashchange事件上，但没有帮助，因为 URL 中没有 #。
在我的 Javascript 代码的每个window.history函数上都放置断点，例如 pushState() ，replaceState()但当我按浏览器返回时，它们都没有被击中。

我不知道要查看哪些其他地方/功能可能会window.history.state更改为null.

如何通过

单击浏览器返回来确定它如何以及在哪里变为空？

你问：

我不知道要查看哪些其他地方/函数可能会将 window.history.state 更改为空。
如何通过
单击浏览器返回来确定它如何以及在哪里变为空？

让我们阅读W3C HTML5规范：

5.5.2 历史界面

。

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

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

5.6.10 历史遍历

当用户代理需要将历史记录遍历到指定的条目 [...] 时，用户代理必须执行以下操作。

。

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

。

如果指定条目的文档具有最新条目，并且该条目不是指定的条目，则让状态更改为 true;否则，请将其为 false。

。

如果状态更改为 true，则使用 PopStateEvent 接口在文档的窗口对象上触发名为 popstate 的受信任事件，并将状态属性初始化为 state 的值。[...]

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