JavaScript History API

在 JavaScript 中，History API 允许我们访问浏览器的历史记录。它可以用来在历史记录中导航。

JavaScript History API 提供了对窗口历史对象进行操作的方法。History 对象是 JavaScript Window 对象的一个属性。窗口历史对象包含了当前会话中访问过的 URL 列表。

History API 是一个非常强大的工具，可以创建许多有用的效果。例如，我们可以用它来实现基于历史记录的撤销重做系统。

如何使用 JavaScript History API？

History API 非常简单易用。只需了解几个方法和一个属性即可：

back() − 此方法导航回历史记录中的前一页。
forward() − 此方法导航至历史记录中的下一页。
go() − 此方法导航至历史记录中的特定页面。传递给 go() 方法的数字是你想要导航到的页面的相对位置。例如，要导航至历史记录中的前一页，你可以将 -1 传递给 go() 方法。
length − 此属性返回历史记录列表的长度。它告诉我们用户已经访问过的页面数量。

语法

以下是使用历史对象的不同方法和属性的语法：

// 加载历史列表中的前一个 URL
history.back();

// 加载历史列表中的下一个 URL
history.forward();

// 通过其编号加载页面
history.go(-2); // 这将导航到前两页
history.go(2); // 这将导航到后两页

// 获取历史列表的长度
const length = history.length;

在历史列表中加载前一页

JavaScript History 对象的 back() 方法加载历史列表中的前一个 URL。我们也可以使用 go() 方法来加载前一页。这两种方法的区别在于 back() 方法只能加载历史列表中的最近前一个 URL，而我们可以使用 go() 方法加载历史列表中的任何前一页。

示例：使用 `back()` 方法加载前一页

在下面的示例中，我们使用了 history back() 方法来加载用户之前访问过的前一页。

请注意，如果你在历史列表中没有前一页（即，你之前没有访问过任何页面），back() 方法将不起作用。

我们实现了一个后退按钮，点击该按钮即可加载之前访问的页面。

<html>
<body>
    <p> 点击 "加载前一页" 按钮来加载之前访问的页面 </p>
    <button onclick="goback()"> 加载前一页 </button>
    <p id="output"> </p>
    <script>
        function goback() {
            history.back();
            document.getElementById("output").innerHTML += 
            "如果存在的话，你将会转到之前访问的页面";
        }
    </script>
</body>
</html>

示例：使用 `go()` 方法加载前一页

在下面的示例中，我们使用了 history go() 方法来加载从当前网页向前两页的位置。

<html>
<body>
   <p> 点击下方按钮加载前两页 </p>    
   <button onclick="moveTo()"> 加载前两页 </button>
   <p id="output"> </p>
   <script>
      function moveTo() {
         history.go(-2);
         document.getElementById("output").innerHTML = 
         "如果存在的话，你将会转到前两页的位置";
      }
   </script>
</body>
</html>

在历史列表中加载下一页

JavaScript History 对象的 forward() 方法加载历史列表中的下一个 URL。我们也可以使用 go() 方法来加载下一页。这两种方法的区别在于 forward() 方法只能加载历史列表中的最近下一页，而我们可以使用 go() 方法加载历史列表中的任何下一页。

示例：使用 `forward()` 方法加载下一页

在下面的代码中，点击按钮将跳转到下一个 URL。它就像浏览器的前进按钮一样工作。

<html>
<body>
   <p> 点击 "加载下一页" 按钮来加载下一次访问的页面 </p>    
   <button onclick="goForward()"> 加载下一页 </button>
   <p id="output"> </p>
   <script>
      function goForward() {
         history.forward();
         document.getElementById("output").innerHTML = 
         "如果存在的话，你将会转到下一次访问的页面"
      }
   </script>
</body>
</html>

示例：使用 `go()` 方法加载下一页

在下面的示例中，我们使用了 go() 方法来导航到当前网页之后的第二页。

<html>
<body>
   <p> 点击下方按钮加载下两页 </p>    
   <button onclick="moveTo()"> 加载下两页 </button>
   <p id="output"> </p>
   <script>
      function moveTo() {
         history.go(2);
         document.getElementById("output").innerHTML = 
         "如果存在的话，你将会转到下两页的位置";
      }
   </script>
</body>
</html>

获取历史列表的长度

我们可以使用 history.length 属性来获取历史记录列表的长度。

示例

尝试以下示例：

<html>
<body>
   <p> 点击下方按钮来获取历史列表的长度 </p>    
   <button onclick="moveTo()"> 获取历史列表的长度 </button>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      function moveTo() {
         output.innerHTML = history.length;
      }
    </script>
</body>
</html>