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>

列印頁面