JavaScript 历史记录 API

介绍

**JavaScript History API** 是 **Web API** 的一部分，它允许我们与 **浏览器的会话历史记录** 进行交互。它提供了用于 **导航、操作和控制历史记录堆栈** 的方法和属性，使开发人员能够创建更具动态性和互动性的用户体验，而无需重新加载整个页面。

JavaScript History API 的主要功能

历史.back()

历史.前进()

历史.go(n)

历史.pushState()

history.replaceState()

history.back() 方法

此方法将浏览器移至**会话历史记录中的上一页**，相当于浏览器的后退按钮。仅当浏览器的历史记录堆栈中存在上一页时，此方法才会起作用。

例子：





The Window History Object
The history.back() Method

输出：

如果历史记录堆栈中存在上一页，则单击“返回”按钮将把用户带到上一页。

history.forward() 方法

此方法将浏览器移至**会话历史记录中的下一页**，相当于浏览器的前进按钮。仅当浏览器的历史记录堆栈中存在下一页时，此方法才会起作用。

例子：





The Window History Object
The history.forward Method

输出：

如果历史记录堆栈中存在下一页，则单击“前进”按钮将把用户带到下一页。

history.go() 方法

此方法用于**导航到浏览器堆栈中的特定点**。它需要一个**参数“n”**，该参数指定我们想要通过历史堆栈导航到的页面编号。

参数“n”可以接受以下值：

正数‘n’使用户在堆栈中向前移动。

负数‘n’使用户在堆栈中向后移动。

如果“n”的值为 0，则重新加载当前页面。

history.pushState() 方法

此方法用于**在当前会话的历史堆栈中添加新条目**，即当前浏览器选项卡中访问的所有页面的集合。

例子：

我们将创建一个**按钮元素**并为其分配一个**点击处理程序**。在处理程序内部，我们调用**pushState()**方法。这将**添加一个新条目，其 URL 不同于当前页面的 URL**。

// HTML ->


// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
    history.pushState(null, ' ', 'some-page');
}

输出：

当前，URL 为 - **https://www.codeguage.com/courses/js/examples/pushstate**

当你点击按钮时，URL 将变为 - **https://www.codeguage.com/courses/js/examples/some-page**

这确认**新条目已添加到当前会话的历史记录**，同时**更改了浏览器地址栏中的 URL**。您还可以看到浏览器的**后退箭头现在也位于左上角**，单击它将带您返回 -

**https://www.codeguage.com/courses/js/examples/pushstate**

有一件非常重要的事情需要知道，**pushState() 会更改 URL，而不会检查它是否真的存在**。这是因为 pushState() 的目的不是加载网页，而是**只是向历史记录添加新条目**。

history.replaceState() 方法

此方法**用新条目替换当前会话历史堆栈中的当前条目**。

例子：

和之前一样，我们设置了一个带有点击处理程序的**按钮**。但这一次，在处理程序内部，我们调用**replaceState()**来用新历史记录条目替换当前历史记录条目。

// HTML =>


// JavaScript =>
var button = document.querySelector('button');

button.onclick = function() {
   history.replaceState(null, '', 'some-page');
}

输出：

当前 URL 是 -

**https://www.codeguage.com/courses/js/examples/replacestate**

单击该按钮时，URL 将更改为 -

**https://www.codeguage.com/courses/js/examples/some-page**

**浏览器 URL 已被替换**，您可以注意到左上角的**后退箭头键未处于活动状态**，确认**新条目尚未添加到历史记录堆栈**，我们只是**用新条目替换了当前条目**。

就这样！您已成功了解了 JavaScript History API，以及如何在应用程序中使用和整合其不同的实用程序。

通过 LinkedIn 与我联系：- Linkedin

请查看我的 GitHub 来了解精彩项目：- Github

查看我的个人投资组合：- Aryan 的投资组合

CLIS.CC