History API - 提供对浏览器会话历史的访问

DOM Window 对象通过 history 对象提供对浏览器会话历史（不要与 WebExtensions history 混淆）的访问。它公开了有用的方法和属性，使您可以在用户的历史记录中来回导航，并操作历史堆栈的内容。

概念和用法

使用 back(), forward() 和 go() 方法，来完成用户历史记录的前后移动。

向前和向后移动

通过 history 向后移动：

window.history.back()

这就像用户单击了浏览器工具栏中的 后退 按钮一样。

同样，您可以向前移动（就像用户单击了 前进 按钮一样），如下所示：

window.history.forward()

移动到历史上的特定点

您可以使用 go() 方法从会话历史中加载特定页面。传入参数为其与当前页面的相对位置。（当前页面的相对位置为 0。）

向后移动一页（相当于调用 back()）：

window.history.go(-1)

向前移动一个页面，就像调用 forward() 一样：

window.history.go(1)

同样，您可以通过传递 2 来向前移动 2 页，依此类推。

go() 方法的另一个用途是通过传递 0 或不带参数调用它来刷新当前页面：

// 以下语句都有刷新页面的效果
window.history.go(0)
window.history.go()

您可以通过查看 length 属性的值来确定历史堆栈中的页数：

let numberOfEntries = window.history.length

接口

History

允许操纵浏览器_会话历史_（即在加载当前页面的选项卡或框架中访问的页面）。

实例

以下实例为 onpopstate 属性分配了一个监听器。然后调用了历史对象的一些方法，用于在当前选项卡的浏览器历史记录中添加、替换和移动。

window.onpopstate = function(event) {
  alert(`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.replaceState({page: 3}, "title 3", "?page=3")
history.back() // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // 弹出 "location: http://example.com/example.html, state: null"
history.go(2)  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}"

规范

规范	状态	备注
HTML Living Standard History 的定义	现行的标准	自 HTML5 依赖没有变化。
HTML5 History 的定义	推荐	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Firefox 5 之前，传递的对象使用 JSON 进行序列化。从 Firefox 6 开始，对象使用结构化克隆算法进行序列化。这允许更多种类的对象被安全传递。

相关链接

参考

• window.history
• WindowEventHandlers.onpopstate

指南

• 使用历史 API