javascript - History.state 是否始终与 popstate event.state 相同？

Question

history.state 是否始终与 popstate event.state 相同？

window.addEventListener("popstate", function (event){
    console.log(history.state === event.state); // ALWAYS TRUE
    // IT SEEMS
}, false);

如果是，两次拥有相同的东西有何目的。

Answer 1

是的，他们应该始终代表同一个状态。

根据the specs当请求浏览器执行历史遍历时，

13. Set history.state to state.

其中状态与16.1中的相同

1. If state changed is true, then fire an event named popstate at the Document object's Window object, using PopStateEvent, with the bubbles attribute initialized to true and the state attribute initialized state.

^强调我的

其他答案的代码证明 Google Chrome 不会返回相同的对象，而是返回一个副本。
尽管如此，这两个状态是相同的，并且 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);

至于为什么将其设置在两个不同的地方，我不得不承认我没有确切的答案......