JavaScript - History API

Web History API

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

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

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

如何使用 JavaScript History API?

History API 是一个非常简单的 API。您只需了解以下几个方法和一个属性:

• back() − 此方法返回历史记录中的上一页。

• forward() − 此方法前进到历史记录中的下一页。

• go() − 此方法导航到历史记录中的特定页面。传递给 go() 方法的数字是您要导航到的页面的相对位置。例如，要导航到历史记录中的上一页，您需要将 -1 传递给 go() 方法。

• length − 此属性返回历史记录列表的长度。它告诉我们用户已访问的页面数量。

语法

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

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

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

// 通过页面编号加载页面
history.go(-2); // 跳转到上一个页面(第二页)
history.go(2); // 跳转到下一个页面(第二页)

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

加载历史列表中的上一个页面

JavaScript history 对象的 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 对象的 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>