是否可以通过Chrome devtools中的window.history.pushState()检查存储的状态对象？

Question

state对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联.

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

是否可以使用Chrome devtools检查此状态对象的内容？

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");

第二个不记录当前状态,因此您必须先执行此操作.

出于安全原因,无法查看历史堆栈.