history.state 是否总是与 popstate event.state 相同？
window.addEventListener("popstate", function (event){
console.log(history.state === event.state); // ALWAYS TRUE
// IT SEEMS
}, false);
如果是，两次拥有相同的东西的目的是什么。
【问题讨论】：
PopStateEvent.state 应该始终与history.state 相同，因为在该过程中，history.state 应该更新为此state。至于两次这样做的目的...很难确定。
不，它们并不总是相同的。
来自MDN
popstate事件在活动历史条目更改时触发。如果被激活的历史记录条目是通过调用history.pushState()创建的或受到history.replaceState()调用的影响，则popstate事件的状态属性包含历史记录条目的状态对象的副本。请注意，仅调用
history.pushState()或history.replaceState()不会触发popstate事件。popstate事件将通过执行浏览器操作来触发，例如单击后退或前进按钮（或在 JavaScript 中调用history.back()或history.forward()）。
以下代码示例演示它们可以不同 (Google Chrome - Version 63.0.3239.108)：
请注意：FireFox 存在一些问题。
window.onpopstate = function(event) {
console.log(event.state === history.state);
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back();
history.back();
history.go(2);【讨论】：
true true true。
Google Chrome Version 63.0.3239.108) 我在 console 中得到两个输出，第一个是 false，第二个是 true。
{page: 1} & {page: 1}, null & null.
=== 检查不同状态的相等性。更好的测试将暗示 JSON.stringify，在这种情况下，chrome 也将始终报告 true。
是的，它们应该始终代表相同的状态。
根据the specs当请求浏览器执行历史遍历时，
- 将
history.state设置为状态。
其中 state 与 16.1
中的相同
- 如果 state changed 为真，则使用
PopStateEvent在Document对象的Window对象上触发一个名为popstate的事件，其中bubbles 属性初始化为true，@ 987654327@ 属性已初始化状态。
强调我的
另一个答案的代码证明的是，谷歌浏览器不会返回相同的对象，而是一个副本。
尽管如此，两种状态都是相同的，而且 UA 似乎也不必尊重此状态对象的 [SameObject] 策略。
所以为了检查相等性，应该检查状态对象的内容，而不是使用直接相等性检查。
window.onpopstate = function(event) {
console.log('same state',
JSON.stringify(event.state) === JSON.stringify(history.state) // always true
);
};
const obj1 = {page: 1};
history.pushState(obj1, "title 1", "?page=1");
console.log('[SameObject]', history.state === obj1); // false
console.log(history.state); // {page: 1}
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back();
history.back();
history.go(2);至于为什么设置在两个不同的地方，我不得不承认我没有一个可靠的答案……
【讨论】：