介紹

JavaScript History API 是 Web API 的一部分，它允許我們與 瀏覽器的會(huì)話歷史記錄 進(jìn)行互動(dòng)。它提供了方法和屬性來(lái)導(dǎo)航、操作和控制歷史堆疊，使開(kāi)發(fā)人員能夠創(chuàng)建更動(dòng)態(tài)和互動(dòng)的使用者體驗(yàn)，而無(wú)需重新載入整個(gè)頁(yè)面。

JavaScript History API 的主要功能

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

History.back() 方法

此方法將瀏覽器移到會(huì)話歷史記錄中的上一頁(yè)，相當(dāng)於瀏覽器的後退按鈕。只有當(dāng)瀏覽器的歷史堆疊中存在上一頁(yè)時(shí)，此操作才有效。

範(fàn)例：

輸出：

點(diǎn)擊「返回」按鈕會(huì)將使用者帶到上一頁(yè)（如果歷史堆疊中存在）。

History.forward() 方法

此方法將瀏覽器移到會(huì)話歷史記錄中的下一頁(yè)，相當(dāng)於瀏覽器的前進(jìn)按鈕。僅當(dāng)瀏覽器歷史堆疊中存在下一頁(yè)時(shí)，此操作才有效。

範(fàn)例：

輸出：

點(diǎn)擊「前進(jìn)」按鈕會(huì)將使用者帶到下一頁(yè)（如果歷史堆疊中存在）。

History.go() 方法

此方法用於導(dǎo)航到瀏覽器堆疊中的特定點(diǎn)。它需要一個(gè)參數(shù)'n'，它指定我們想要透過(guò)歷史堆疊導(dǎo)航到的頁(yè)面的編號(hào)。

參數(shù) 'n' 可以接受以下值：

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

History.pushState() 方法

此方法用於在目前會(huì)話的歷史堆疊中新增條目，即目前瀏覽器標(biāo)籤中造訪過(guò)的所有頁(yè)面的集合。

範(fàn)例：
我們將建立一個(gè)按鈕元素並為其分配一個(gè)點(diǎn)擊處理程序。在處理程序內(nèi)部，我們呼叫 pushState() 方法。這新增了一個(gè)具有與目前頁(yè)面不同的URL的新條目。

輸出：

目前，網(wǎng)址是 - https://www.codeguage.com/courses/js/examples/pushstate

當(dāng)您點(diǎn)擊按鈕時(shí)，URL 將更改為 - https://www.codeguage.com/courses/js/examples/some-page

這確認(rèn)新條目已新增至目前會(huì)話的歷史記錄，同時(shí)變更瀏覽器網(wǎng)址列中的 URL。您還可以看到瀏覽器的後退箭頭現(xiàn)在在左上角也處?kù)痘顒?dòng)狀態(tài)，點(diǎn)擊該箭頭將帶您返回 -
https://www.codeguage.com/courses/js/examples/pushstate

要知道的一件極其重要的事情是 pushState() 會(huì)更改 URL，而不會(huì)檢查它是否實(shí)際存在。這是因?yàn)?PushState() 的目的不是載入網(wǎng)頁(yè)，而是只是向歷史記錄新增條目。

History.replaceState() 方法

此方法用新條目取代目前會(huì)話歷史堆疊中的目前條目。

範(fàn)例：
和之前一樣，我們有一個(gè)帶有點(diǎn)擊處理程序集的按鈕。但這次，在處理程序內(nèi)部，我們呼叫 replaceState()?將目前歷史記錄條目替換為新條目。

輸出：

目前網(wǎng)址是 -
https://www.codeguage.com/courses/js/examples/replacestate

當(dāng)您點(diǎn)擊按鈕時(shí)，URL 將變更為 -
https://www.codeguage.com/courses/js/examples/some-page

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

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

在 LinkedIn 上與我聯(lián)絡(luò) :- Linkedin

請(qǐng)查看我的 GitHub，了解精彩的專案：- Github

查看我的個(gè)人作品集：- Aryan 的作品集

以上是JavaScript 歷史 API的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！