Window.history

window.history是JavaScript的一个内置对象，它存储了浏览器窗口的历史记录，并提供了一些方法和属性来访问和操作这些记录。在本文中，我们将深入了解 window.history 对象及其用例。

History 对象的属性

history对象具有以下属性：

length

history.length属性返回历史记录中的总记录数。

代码片段示例：

console.log(window.history.length); // 记录数

state

history.state属性返回当前历史记录的状态对象。

代码片段示例：

console.log(window.history.state); // 当前状态

History 对象的方法

history对象具有以下方法：

back()

history.back()方法将浏览器窗口中的位置后退一个历史记录。

代码片段示例：

window.history.back(); // 上一页

forward()

history.forward()方法将浏览器窗口中的位置前进一个历史记录。

代码片段示例：

window.history.forward(); // 下一页

go()

history.go()方法可以根据浏览器的历史记录，将浏览器窗口中的位置前进或后退到指定的历史记录。

代码片段示例：

window.history.go(-2); // 后退两页
window.history.go(2); // 前进两页

pushState()

history.pushState()方法可以在历史记录中创建新的状态对象，并在浏览器的地址栏中修改URL。

代码片段示例：

var stateObj = { foo: "bar" };
window.history.pushState(stateObj, "page 2", "bar.html");

replaceState()

history.replaceState()方法用于修改当前状态的状态对象和URL。

代码片段示例：

var stateObj = { foo: "bar" };
window.history.replaceState(stateObj, "page 2", "bar.html");

History事件

在 history 对象上有两个事件，它们被触发当浏览器的历史记录发生变化时：

popstate

popstate事件在使用 pushState() 和 replaceState() 方法时会被触发。

代码片段示例：

window.addEventListener('popstate', function(event) {
  console.log(event.state);
});

hashchange

hashchange事件在 URL 中的哈希值更改时触发，即在 # 处粘上新的哈希值。

代码片段示例：

window.addEventListener('hashchange', function() {
  console.log("hash changed");
});

总结

在本文中，我们探讨了 window.history 对象及其属性、方法和事件。了解这些将帮助您更好地管理浏览器的历史记录。