是否可以通过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");

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

出于安全原因，无法查看历史堆栈。