JavaScript Window History

Window.history对象是浏览器API的一部分，允许JavaScript与浏览器历史记录交互。使用JavaScript，用户可以获取和操作浏览器的记录，包括向前/向后导航、保存书签等。

属性

length

Window.history.length属性返回浏览器历史记录中的条目数(无论是历史记录还是session历史记录)。

方法

back()

Window.history.back()方法使浏览器回到历史记录中的前一个页面。如果历史记录中没有前一个页面，则back()方法不执行任何操作。

forward()

Window.history.forward()方法使浏览器前进到历史记录中的下一个页面。如果历史记录中没有下一个页面，则forward()方法不执行任何操作。

go()

Window.history.go()方法允许浏览器向前或向后浏览历史记录。可以向前或向后浏览一个指定的数量，可以是正数或负数。

用法示例：

// 向前浏览一次历史记录
history.go(1);

// 向后浏览一次历史记录
history.go(-1);

// 向前浏览两次历史记录
history.go(2);

pushState()

Window.history.pushState()方法添加一个新条目到浏览器的历史记录，但是它不会导致浏览器加载新页面。pushState()方法添加的条目仅仅修改浏览器的历史记录，而不会触发页面的重新加载。

此方法需要三个参数：新状态对象、新状态标题和可选的相对的URL(该URL相对于当前页面URL)。

用法示例：

history.pushState(null, "Homepage", "/homepage");

replaceState()

Window.history.replaceState()方法用新条目替换当前的历史记录条目。与pushState()方法不同，调用replaceState()方法不会添加一个新条目到历史记录中，而是用新状态对象替换当前条目。

此方法需要三个参数：新状态对象、新状态标题和可选的相对的URL(该URL相对于当前页面URL)。

用法示例：

history.replaceState(null, "Homepage", "/homepage");

事件

popstate事件

popstate事件在操作浏览器历史记录时触发。当用户点击浏览器的前进或后退按钮时，该事件会被触发。

当使用pushState()方法和replaceState()方法修改历史记录时，也会触发popstate事件，但是这种情况下不会重新加载页面。

popstate事件传递一个事件对象作为参数，其中包含历史记录的状态信息。该状态对象包含当前历史记录条目的状态数据。

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

注意事项

• 可以在同一个页面中修改历史记录，但是如果访问过程中涉及到页面历史记录的任何部分的原始加载，则增加或修改历史记录会重新加载页面。
• 不能使用pushState()和replaceState()方法修改来自外部站点的历史记录。
• 在pushState()和replaceState()方法中使用的URL的路径必须与当前页面的URL路径相同，否则会导致重新加载页面。