如何在Chrome devtools中检查通过window.history.pushState（）存储的状态对象？

Question

状态对象是一个 JavaScript 对象，它与 pushState() 创建的新历史记录条目相关联。

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

在Chrome开发工具中，是否可以检查此状态对象的内容？

- daniel.sedlacek

Answer 1

state 对象是 history 对象的一个属性。您可以在控制台中使用以下内容访问它：

window.history.state

示例

每次从历史堆栈中弹出时记录日志

方法 1：

var back = window.history.back;

window.history.back = function() {
    console.log("location: " + document.location + ", state: " + 
        JSON.stringify(window.history.state));

    return back.apply(this, arguments);
}

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.pushState({page: 3}, "title 3", "?page=3");
history.pushState({page: 4}, "title 4", "?page=4");

方法2：

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + 
      JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.pushState({page: 3}, "title 3", "?page=3");
history.pushState({page: 4}, "title 4", "?page=4");

这个第二个例子没有记录当前状态，所以你首先要记录一下。

出于安全原因，不可能查看历史记录堆栈。

- Gideon Pyzer

---

我能轻松地看到其他历史步骤的所有其他状态吗？ - daniel.sedlacek

@daniel.sedlacek 由于安全原因，您无法查看堆栈中的所有先前状态。 您可以编写一些代码，在每次弹出时将状态对象记录到控制台。 请参阅我的更新答案。 - Gideon Pyzer

这就是为什么我期望堆栈可以通过开发工具访问，而不是通过控制台中的JS访问。但还是谢谢你的回答。 - daniel.sedlacek

还可以查看popstate示例。 - djvg