介紹
JavaScript History API 是 Web API 的一部分，它允許我們與 瀏覽器的會話歷史記錄 進行交互。它提供了方法和屬性來導航、操作和控制歷史堆棧，使開發(fā)人員能夠創(chuàng)建更加動態(tài)和交互式的用戶體驗，而無需重新加載整個頁面。
JavaScript History API 的主要功能
- history.back()
- history.forward()
- history.go(n)
- history.pushState()
- history.replaceState()
History.back() 方法
此方法將瀏覽器移動到會話歷史記錄中的上一頁，相當于瀏覽器的后退按鈕。僅當瀏覽器的歷史堆棧中存在上一頁時，此操作才有效。
示例：
<!DOCTYPE html>
<html>
<body>
<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>
<button onclick="history.back()">Go Back</button>
</body>
</html>
輸出：
單擊“返回”按鈕會將用戶帶到上一頁（如果歷史堆棧中存在）。
History.forward() 方法
此方法將瀏覽器移動到會話歷史記錄中的下一頁，相當于瀏覽器的前進按鈕。僅當瀏覽器歷史堆棧中存在下一頁時，此操作才有效。
示例：
<!DOCTYPE html>
<html>
<body>
<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>
<button onclick="history.forward()">Go Forward</button>
</body>
</html>
輸出：
單擊“前進”按鈕會將用戶帶到下一頁（如果歷史堆棧中存在）。
History.go() 方法
此方法用于導航到瀏覽器堆棧中的特定點。它需要一個參數'n'，它指定我們想要通過歷史堆棧導航到的頁面的編號。
參數 'n' 可以接受以下值：
-
正數“n” 使用戶在堆棧中前進。
-
負數“n” 使用戶在堆棧中向后。
- 如果'n'的值為0，它重新加載當前頁面。
History.pushState() 方法
此方法用于在當前會話的歷史堆棧中添加新條目，即當前瀏覽器選項卡中訪問過的所有頁面的集合。
示例：
我們將創(chuàng)建一個按鈕元素并為其分配一個點擊處理程序。在處理程序內部，我們調用 pushState() 方法。這添加了一個具有與當前頁面不同的URL的新條目。
// HTML ->
<button>Call pushState()</button>
// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
history.pushState(null, ' ', 'some-page');
}
輸出：
目前，網址是 - https://www.codeguage.com/courses/js/examples/pushstate
當您點擊按鈕時，URL 將更改為 - https://www.codeguage.com/courses/js/examples/some-page
這確認新條目已添加到當前會話的歷史記錄，同時更改瀏覽器地址欄中的 URL。您還可以看到瀏覽器的后退箭頭現(xiàn)在在左上角也處于活動狀態(tài)，單擊該箭頭將帶您返回 -
https://www.codeguage.com/courses/js/examples/pushstate
要知道的一件極其重要的事情是 pushState() 會更改 URL，而不會檢查它是否實際存在。這是因為 PushState() 的目的不是加載網頁，而是只是向歷史記錄添加新條目。
History.replaceState() 方法
此方法用新條目替換當前會話歷史堆棧中的當前條目。
示例：
和以前一樣，我們有一個帶有點擊處理程序集的按鈕。但這一次，在處理程序內部，我們調用 replaceState()?將當前歷史記錄條目替換為新條目。
<!DOCTYPE html>
<html>
<body>
<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>
<button onclick="history.back()">Go Back</button>
</body>
</html>
輸出：
當前網址是 -
https://www.codeguage.com/courses/js/examples/replacestate
當您點擊按鈕時，URL 將更改為 -
https://www.codeguage.com/courses/js/examples/some-page
瀏覽器網址已被替換，您可以注意到左上角的后退箭頭鍵未激活，確認新條目已尚未添加到歷史堆棧，我們剛剛用新條目替換了當前條目。
就是這樣！您已經成功了解了 JavaScript History API，以及如何在您的應用程序中使用和合并其不同的實用程序。
在 LinkedIn 上與我聯(lián)系 :- Linkedin
請查看我的 GitHub，了解精彩的項目：- Github
查看我的個人作品集：- Aryan 的作品集
以上是JavaScript 歷史 API的詳細內容。更多信息請關注PHP中文網其他相關文章！