JavaScript 歷史 API

介紹

JavaScript History API 是 Web API 的一部分，它允許我們與 瀏覽器的會話歷史記錄 進行互動。它提供了方法和屬性來導航、操作和控制歷史堆疊，使開發人員能夠創建更動態和互動的使用者體驗，而無需重新載入整個頁面。

JavaScript History API 的主要功能

1. history.back()
2. history.forward()
3. history.go(n)
4. history.pushState()
5. history.replaceState()

History.back() 方法

此方法將瀏覽器移到會話歷史記錄中的上一頁，相當於瀏覽器的後退按鈕。只有當瀏覽器的歷史堆疊中存在上一頁時，此操作才有效。

範例：

輸出：

點擊「返回」按鈕會將使用者帶到上一頁（如果歷史堆疊中存在）。

History.forward() 方法

此方法將瀏覽器移到會話歷史記錄中的下一頁，相當於瀏覽器的前進按鈕。僅當瀏覽器歷史堆疊中存在下一頁時，此操作才有效。

範例：

輸出：

點擊「前進」按鈕會將使用者帶到下一頁（如果歷史堆疊中存在）。

History.go() 方法

此方法用於導航到瀏覽器堆疊中的特定點。它需要一個參數'n'，它指定我們想要透過歷史堆疊導航到的頁面的編號。

參數 'n' 可以接受以下值：

• 正數「n」 使用戶在堆疊中前進。
• 負數「n」 使用者在堆疊中向後。
• 如果'n'的值為0，它重新載入目前頁面。

History.pushState() 方法

此方法用於在目前會話的歷史堆疊中新增條目，即目前瀏覽器標籤中造訪過的所有頁面的集合。

範例：
我們將建立一個按鈕元素並為其分配一個點擊處理程序。在處理程序內部，我們呼叫 pushState() 方法。這新增了一個具有與目前頁面不同的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() 將目前歷史記錄條目替換為新條目。

輸出：

目前網址是 -
https://www.codeguage.com/courses/js/examples/replacestate

當您點擊按鈕時，URL 將變更為 -
https://www.codeguage.com/courses/js/examples/some-page

瀏覽器網址已被替換，您可以注意到左上角的後退箭頭鍵未啟動，確認新條目已尚未新增至歷史堆疊 ，我們剛剛用新條目取代了當前條目。

就是這樣！您已經成功了解了 JavaScript History API，以及如何在您的應用程式中使用和合併其不同的實用程式。

在 LinkedIn 上與我聯絡 :- Linkedin

請查看我的 GitHub，了解精彩的專案：- Github

查看我的個人作品集：- Aryan 的作品集

以上是JavaScript 歷史 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！