历史记录 API

**历史记录 API** 通过 history 全局对象提供对浏览器会话历史记录的访问（不要与 WebExtensions 历史记录混淆）。它公开了有用的方法和属性，使您可以向前和向后浏览用户的历史记录，并操作历史记录堆栈的内容。

注意：此 API 仅在主线程（Window）上可用。无法在 Worker 或 Worklet 上下文中访问它。

概念和用法

使用 back()、forward() 和 go() 方法可以向前和向后浏览用户的历史记录。

向前和向后移动

要向后浏览历史记录

history.back();

这与用户单击浏览器工具栏中的 后退 按钮完全相同。

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

history.forward();

移动到历史记录中的特定位置

您可以使用 go() 方法从会话历史记录中加载特定页面，该页面由其相对于当前页面的相对位置标识。（当前页面的相对位置为0。）

后退一页（相当于调用 back())

history.go(-1);

要前进一页，就像调用 forward()

history.go(1);

类似地，您可以通过传递2向前移动 2 页，依此类推。

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

// The following statements
// both have the effect of
// refreshing the page
history.go(0);
history.go();

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

const numberOfEntries = history.length;

接口

历史记录: 允许操作浏览器会话历史记录（即当前页面加载到的选项卡或框架中访问过的页面）。
PopStateEvent: popstate 事件的接口。

示例

以下示例为 popstate 事件分配了一个监听器。然后，它说明了 history 对象的一些方法，以在当前选项卡的浏览器历史记录中添加、替换和移动。

window.addEventListener("popstate", (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(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null"
history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

规范

规范
HTML 标准 # the-history-interface

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

history 全局对象
popstate 事件