如何使用 JavaScript 操作浏览器历史记录 API

当我们在浏览器上访问网站的时候，浏览器会自动帮我们记录下我们访问的历史记录。浏览器历史记录 API 可以让我们通过 JavaScript 进行控制这些历史记录。下面是如何使用 JavaScript 操作浏览器历史记录的完整攻略。

1. pushState()方法

使用 pushState() 方法可以在当前浏览器历史记录中添加一个新的状态。新的状态包括一个页面的 URL、标题和可以传递给新状态的数据。

window.history.pushState(stateObject, title, URL);

• stateObject: 一个包含新状态数据的 JavaScript 对象，可以在之后通过 history.state 获取
• title: 新状态的标题，但是现在大多数浏览器都会忽略这个参数，建议填空字符串
• URL: 新状态的 URL，浏览器会将其添加到历史记录中

假设我们现在在一个页面，我们想要通过 pushState() 方法添加一个新的状态并更新 URL。如果我们想要将 URL 更新为 https://example.com/new-page，可以使用以下代码：

window.history.pushState({}, '', 'https://example.com/new-page');

使用此代码后，URL 将更新为 https://example.com/new-page，但是不会有任何其他的网页行为，比如页面不会刷新。

2. replaceState()方法

使用 replaceState() 方法可以将当前浏览器历史记录中的最新状态替换为新的状态。与 pushState() 方法不同，replaceState() 不会向历史记录中添加一个新的状态，而是用新的状态替换当前状态。

window.history.replaceState(stateObject, title, URL);

• stateObject: 一个包含新状态数据的 JavaScript 对象，可以在之后通过 history.state 获取
• title: 新状态的标题，但是现在大多数浏览器都会忽略这个参数，建议填空字符串
• URL: 新状态的 URL，浏览器会将其替换为当前状态的 URL

假设我们现在在一个页面，我们想要通过 replaceState() 方法将当前状态的 URL 更新为新的 URL。如果我们想要将 URL 更新为 https://example.com/new-page，可以使用以下代码：

window.history.replaceState({}, '', 'https://example.com/new-page');

使用此代码后，URL 将更新为 https://example.com/new-page，但是不会有任何其他的网页行为，比如页面不会刷新。

示例说明

示例 1

假设我们在一个页面，我们想要通过 JavaScript 操作 pushState() 方法将页面 URL 更新为 https://example.com/new-page，并将整个页面的内容更新为一个新的HTML片段：

function loadNewPage() {
  const xhr = new XMLHttpRequest();
  xhr.onload = function() {
    document.querySelector('#content').innerHTML = xhr.responseText;
    window.history.pushState({}, '', 'https://example.com/new-page');
  };
  xhr.open('GET', '/new-page.html');
  xhr.send();
}

此代码将使用 XMLHttpRequest 对象请求一个新页面，将整个页面的 HTML 片段插入到 id 为 content 的 DOM 元素中，并同时将 URL 更新为 https://example.com/new-page，但不会刷新页面。

示例 2

假设我们在一个页面，我们想要通过 JavaScript 操作 replaceState() 方法将页面 URL 更新为 https://example.com/new-page，并将整个页面的内容更新为一个新的HTML片段：

function replaceCurrentPage() {
  const xhr = new XMLHttpRequest();
  xhr.onload = function() {
    document.querySelector('#content').innerHTML = xhr.responseText;
    window.history.replaceState({}, '', 'https://example.com/new-page');
  };
  xhr.open('GET', '/new-page.html');
  xhr.send();
}

此代码将使用 XMLHttpRequest 对象请求一个新页面，将整个页面的HTML片段插入到 id 为 content 的DOM元素中，并同时将 URL 更新为 https://example.com/new-page，但不会刷新页面，并且会将当前页面的历史记录删除。