JavaScript - 历史记录 API

Web 历史记录 API

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

JavaScript 历史记录 API 为我们提供了操作窗口历史记录对象的方法。History 对象是 JavaScript 窗口对象的属性。窗口历史记录对象包含当前会话中已访问 URL 的数组。

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

如何使用 JavaScript History API？

History API 使用起来非常简单。你只需要了解几个方法和一个属性。

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

语法

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

// Load the previous URL in the history list
history.back();

// Load the next URL in the history list
history.forward();

// Load the page through its number
history.go(-2); // This will go to the previous 2nd page
history.go(2); // This will go to the next 2nd page

// Get the length of the history list
const length = history.length;

加载历史记录列表中的上一页

JavaScript history 对象的 back() 方法加载历史记录列表中的上一个 URL。我们也可以使用 history go() 方法加载上一页。这两种方法的区别在于 back() 方法只加载历史记录列表中紧挨着的前一个 URL，而我们可以使用 go() 方法加载历史记录列表中的任何前一个 URL。

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

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

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

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

<html>
<body>
    <p> Click "Load Previous Page" button to load previous visited page </p>
    <button onclick="goback()"> Load Previous Page </button>
    <p id = "output"> </p>
    <script>
        function goback() {
            history.back();
            document.getElementById("output").innerHTML += 
            "You will have gone to previous visited page if it exists";
        }
    </script>
</body>
</html>

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

在下面的示例中，我们使用了 history go() 方法来加载当前网页的倒数第二个已访问页面。

<html>
<body>
   <p> Click the below button to load 2nd previous visited page</p>    
   <button onclick = "moveTo()"> Load 2nd Previous Page </button>
   <p id = "output"> </p>
   <script>
      function moveTo() {
         history.go(-2);
         document.getElementById("output").innerHTML = 
         "You will have forwarded to 2nd previous visited page if it exists.";
      }
   </script>
</body>
</html>

加载历史记录列表中的下一页

JavaScript history 对象的 forward() 方法加载历史记录列表中的下一个 URL。我们也可以使用 history go() 方法加载下一页。这两种方法的区别在于 forward() 方法只加载历史记录列表中紧挨着的下一个 URL，而我们可以使用 go() 方法加载历史记录列表中的任何下一个 URL。

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

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

<html>
<body>
   <p> Click "Load Next Page" button to load next visited page</p>    
   <button onclick = "goForward()"> Load Next Page </button>
   <p id = "output"> </p>
   <script>
      function goForward() {
         history.forward();
         document.getElementById("output").innerHTML = 
         "You will have forwarded to next visited page if it exists."
      }
   </script>
</body>
</html>

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

在下面的示例中，我们使用了 go() 方法从当前网页跳转到倒数第二个已访问页面。

<html>
<body>
   <p> Click the below button to load  next 2nd visited page</p>    
   <button onclick = "moveTo()"> Load 2nd Next Page </button>
   <p id = "output"> </p>
   <script>
      function moveTo() {
         history.go(2);
         document.getElementById("output").innerHTML = 
         "You will have forwarded to 2nd next visited page if it exists.";
      }
   </script>
</body>
</html>

获取历史记录列表的长度

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

示例

尝试以下示例：

<html>
<body>
   <p> Click the below button to get the lenght of history list</p>    
   <button onclick = "moveTo()"> Get Lenght of History List </button>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      function moveTo() {
         output.innerHTML = history.length;
      }
    </script>
</body>
</html>

打印页面