History 是 window 對象中的一個 JavaScript 對象，它包含了關于瀏覽器會話歷史的詳細信息。你所訪問過的 URL 列表將被像堆棧一樣存儲起來。瀏覽器上的返回和前進按鈕使用的就是 history 的信息。

History 對象包含長度屬性，它包含了會話歷史記錄棧中的 URL 數量。例如，如果用戶在瀏覽器中打開一個標簽頁，歷史記錄的長度將是 1（新的標簽頁也是一個網頁）。然后用戶輸入一個網址 foo.com 并點擊回車，現在歷史記錄對象的長度將是 2, 用戶轉到其他頁面 bar.com，歷史記錄對象的長度將就是 3 了。

Back 和 Forward 方法

你可以使用 history 對象的 back 和 forward 方法來瀏覽網頁。例如，如果你想轉到上一個頁面，那么可以使用：

history.back()

同樣的，如果你想轉到下一頁，你可以使用：

history.forward()

Go 方法

如果您想向前或向后移動 n 個頁面，那么您可以使用 go 方法：

history.go(-2) // 倒退 2 頁history.go(2) // 前進 2 頁

所以 history.go(1) 和 history.forward() 效果是相同的，history.go(-1) 和 history.go(-1) 效果是相同的。history.go 方法的默認值為 0，如果不傳任何數字，則當前頁面會被刷新。

window.history.go(0)window.history.go()

PushState

你也可以使用 pushState 和 replaceState 方法改變頁面的 URL。pushState 會改變頁面的 URL，并將改變后的 URL 添加到 history 對象的 URL 棧頂部。語法如下：

history.pushState(state, title, url)

參數 state 是狀態數據，它將被存儲在 history.state 變量中。參數 title 是標題文本，不過它對大多數瀏覽器都沒有效果，所以一般傳空字符串（''）或傳 null 就可以了。

讓我們在控制臺中嘗試一下，在執行之前，比如打開 baidu.com，然后在控制臺輸入：

history.pushState(’123’, ’’, ’new-url’)

執行上面的代碼后，它會將頁面地址欄中的 URL 改為 baidu.com/new-url，同時將 URL 添加到 history 對象中。此時檢查 history.length 會增加 1。

除此之外，我們還可以為每個 URL 存儲狀態（當前頁面的數據）。在上面的例子中，你會把 '123' 存儲在 history.state 變量中，當你返回到這個頁面時，你就可以 history.state 再次拿到到這些數據。例如：

history.pushState(’temp data 1’, ’title’, ’new-url-1’)history.state //'temp data 1'history.pushState(’temp data 2’, ’title’, ’new-url-2’)history.state //'temp data 2'history.back()history.state // 'temp data 1'

每當通過 pushState 返回到之前被添加到歷史記錄的頁面時，瀏覽器就會觸發一個名為 popstate 的事件，并將 state 數據作為參數。比如在瀏覽器打開一個新標簽頁，進入某個網頁（比如 baidu.com），先監聽 popstate 事件：

window.addEventListener(’popstate’, (e) => console.log(e))

然后調用 pushState：

history.pushState({ name: ’test1’ }, ’title’, ’test1’)

然后按下返回按鈕，popstate 事件就會被觸發，你可以在監聽事件中查看打印出來的數據。在打印的數據中，可以找到 history.state 的值。

注冊 pushState 中的 url 可以是完整的 url，但必須和當前頁面是相同的域名，否則會拋出跨域異常。

瀏覽器還有一個 replaceState API，和 pushState 的區別是，它只改變了 URL，不會將 URL 添加到歷史記錄，這里就不再累述了。

實例演示

現在我們做一個小的網頁應用，這個應用將實現如下功能：

我們先不關心 history API，先實現功能。下面是 html 關鍵代碼：

<select id='selectbox'> <option value='both'>全部</option> <option value='male'>先生</option> <option value='femalt'>女士</option></select><ul id='userslist'> <li gender='male'>張先生</li> <li gender='female'>李女士</li> <li gender='female'>王女士</li></ul>

下面是 javascript 關鍵代碼：

let selectBox = document.getElementById(’selectBox’)let usersList = document.getElementById(’usersList’)selectBox.addEventListener(’change’, onSelectBoxChange)function onSelectBoxChange(ev) { let val = this.value filterList(val)}function filterList(val) { let users = usersList.children for (let i = 0; i < users.length; i++) { let user = users[i] let gender = user.getAttribute(’gender’) if (gender === val || val === ’both’) { user.style.display = ’’ } else { user.style.display = ’none’ } }}

實現后的效果如下：

當修改下拉列表時，為了使瀏覽器地址也發生變化，需要使用 pushSate 方法：

function onSelectBoxChange(ev) { let val = this.value filterList(val) history.pushState({ gender: val }, null, val)}

此時會有個問題，當我們點擊前進/后退時，瀏覽器地址變了，但對應的數據卻不對。因此，當進行前進/后退時，我們需要監聽 popstate 重新過濾數據：

window.addEventListener(’popstate’, onPopState)function onPopState(ev) { let state = ev.state filterList(state.gender)}

我們還需要處理頁面刷新的問題。當刷新頁面時，歷史記錄不會改變，history.state 的狀態值也保持不變。所以我們可以從 history.state 中取出當前的狀態數據，利用 state.gender 的值就可以在 load 事件中來過慮出當前 URL 對應的用戶列表：

window.addEventListener(’load’, function () { let gender = history.state ? history.state.gender : ’both’ filterList(gender)})

這是個簡單的示例，你也可以繼續進一步優化。今天的分享就到這里，有問題請在下面留言哦~~

以上就是如何使用 JavaScript 操作瀏覽器歷史記錄 API的詳細內容，更多關于JavaScript 操作歷史記錄api的資料請關注好吧啦網其它相關文章！