歷史API

歷史記錄API是瀏覽器讓您與地址欄和導航歷史記錄進行交互的方式

介紹

歷史API可讓您與瀏覽器歷史記錄交互，觸發瀏覽器導航方法和更改地址欄內容。

與現代的單頁應用程序結合使用時特別有用，在該應用程序中，您永遠不會在服務器端請求新頁面，而是頁面始終是相同的：只是內部內容髮生了變化。

一種現代JavaScript應用程序在未與History API進行交互的瀏覽器中（無論是顯式的還是在框架級別）運行，對於用戶而言將是糟糕的體驗，因為後退和前進按鈕中斷。

另外，在瀏覽應用程序時，視圖發生變化，但地址欄沒有變化。

並且重新加載按鈕中斷：由於沒有深層鏈接，因此重新加載頁面將使瀏覽器顯示其他頁面

歷史記錄API是HTML5中引入的，現已發布所有現代瀏覽器均支持。 IE從10版開始就支持它，如果您需要支持IE9和更早的版本，請使用History.js庫。

訪問歷史記錄API

歷史記錄API可在window對象，因此您可以這樣稱呼它：window.history或者history，自從window是全局對象。

The History object

瀏覽歷史

讓我們從您可以使用History API進行的最簡單的操作開始。

返回上一個頁面：

history.back()

這將轉到會話歷史記錄中的上一個條目。您可以使用轉到下一頁

history.forward()

這就像使用瀏覽器的後退和前進按鈕一樣。

go()使您可以向後或向前深入瀏覽多個級別。例如

history.go(-1) //equivalent to history.back()
history.go(-2) //equivalent to calling history.back() twice
history.go(1) //equivalent to history.forward()
history.go(3) //equivalent to calling history.forward() 3 times

要知道歷史記錄中有多少個條目，您可以致電

history.length

在歷史記錄中添加一個條目

使用pushState()您可以以編程方式創建新的歷史記錄條目。您傳遞3個參數。

第一個是可以包含任何內容的對象（但是存在大小限制，並且該對象需要可序列化）。

當前主流瀏覽器未使用第二個參數，因此通常傳遞一個空字符串。

第三個參數是與新狀態關聯的URL。請注意，該URL必須屬於當前URL的同一原始域。

const state = { name: 'Flavio' }
history.pushState(state, '', '/user')

調用它不會更改頁面的內容，也不會引起任何瀏覽器操作，例如更改window.location將。

修改歷史記錄條目

儘管pushState()使您可以向歷史記錄添加新狀態，replaceState()允許您編輯當前歷史記錄狀態。

history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')

如果您現在打電話

history.back()

瀏覽器直接進入/posts，自從/post/first曾是已取代經過/post/second

訪問當前歷史記錄輸入狀態

進入物業

history.state

返回當前狀態對象（傳遞給pushState或者replaceState）。

這`onpopstate`事件

調用此事件window每次活動歷史記錄狀態更改時，都將當前狀態作為回調參數：

window.onpopstate = event => {
  console.log(event.state)
}

將記錄新的狀態對象（傳遞給第一個參數pushState或者replaceState）每次您致電history.back()，history.forward()或者history.go()。

免費下載我的JavaScript初學者手冊