如何检查通过Chrome devtools中通过window.history.pushState()存储的状态对象?

问题描述 投票:7回答:1

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

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

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

google-chrome-devtools
1个回答
8
投票

state对象是history对象的属性。您可以使用以下命令在控制台中访问它:

window.history.state

示例

State Object

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

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

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

State

出于安全原因,无法浏览历史记录堆栈。

© www.soinside.com 2019 - 2024. All rights reserved.