History 是 window 對(duì)象中的一個(gè) JavaScript 對(duì)象，它包含了關(guān)于瀏覽器會(huì)話歷史的詳細(xì)信息。你所訪問(wèn)過(guò)的 URL 列表將被像堆棧一樣存儲(chǔ)起來(lái)。瀏覽器上的返回和前進(jìn)按鈕使用的就是 history 的信息。

History 對(duì)象包含長(zhǎng)度屬性，它包含了會(huì)話歷史記錄棧中的 URL 數(shù)量。例如，如果用戶在瀏覽器中打開(kāi)一個(gè)標(biāo)簽頁(yè)，歷史記錄的長(zhǎng)度將是 1（新的標(biāo)簽頁(yè)也是一個(gè)網(wǎng)頁(yè)）。然后用戶輸入一個(gè)網(wǎng)址 foo.com 并點(diǎn)擊回車，現(xiàn)在歷史記錄對(duì)象的長(zhǎng)度將是 2, 用戶轉(zhuǎn)到其他頁(yè)面 bar.com，歷史記錄對(duì)象的長(zhǎng)度將就是 3 了。

Back 和 Forward 方法

你可以使用 history 對(duì)象的 back 和 forward 方法來(lái)瀏覽網(wǎng)頁(yè)。例如，如果你想轉(zhuǎn)到上一個(gè)頁(yè)面，那么可以使用：

history.back()

同樣的，如果你想轉(zhuǎn)到下一頁(yè)，你可以使用：

history.forward()

Go 方法

如果您想向前或向后移動(dòng) n 個(gè)頁(yè)面，那么您可以使用 go 方法：

history.go(-2) // 倒退 2 頁(yè)history.go(2) // 前進(jìn) 2 頁(yè)

所以 history.go(1) 和 history.forward() 效果是相同的，history.go(-1) 和 history.go(-1) 效果是相同的。history.go 方法的默認(rèn)值為 0，如果不傳任何數(shù)字，則當(dāng)前頁(yè)面會(huì)被刷新。

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

PushState

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

history.pushState(state, title, url)

參數(shù) state 是狀態(tài)數(shù)據(jù)，它將被存儲(chǔ)在 history.state 變量中。參數(shù) title 是標(biāo)題文本，不過(guò)它對(duì)大多數(shù)瀏覽器都沒(méi)有效果，所以一般傳空字符串（''）或傳 null 就可以了。

讓我們?cè)诳刂婆_(tái)中嘗試一下，在執(zhí)行之前，比如打開(kāi) baidu.com，然后在控制臺(tái)輸入：

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

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

除此之外，我們還可以為每個(gè) URL 存儲(chǔ)狀態(tài)（當(dāng)前頁(yè)面的數(shù)據(jù)）。在上面的例子中，你會(huì)把 '123' 存儲(chǔ)在 history.state 變量中，當(dāng)你返回到這個(gè)頁(yè)面時(shí)，你就可以 history.state 再次拿到到這些數(shù)據(jù)。例如：

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'

每當(dāng)通過(guò) pushState 返回到之前被添加到歷史記錄的頁(yè)面時(shí)，瀏覽器就會(huì)觸發(fā)一個(gè)名為 popstate 的事件，并將 state 數(shù)據(jù)作為參數(shù)。比如在瀏覽器打開(kāi)一個(gè)新標(biāo)簽頁(yè)，進(jìn)入某個(gè)網(wǎng)頁(yè)（比如 baidu.com），先監(jiān)聽(tīng) popstate 事件：

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

然后調(diào)用 pushState：

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

然后按下返回按鈕，popstate 事件就會(huì)被觸發(fā)，你可以在監(jiān)聽(tīng)事件中查看打印出來(lái)的數(shù)據(jù)。在打印的數(shù)據(jù)中，可以找到 history.state 的值。

注冊(cè) pushState 中的 url 可以是完整的 url，但必須和當(dāng)前頁(yè)面是相同的域名，否則會(huì)拋出跨域異常。

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

實(shí)例演示

現(xiàn)在我們做一個(gè)小的網(wǎng)頁(yè)應(yīng)用，這個(gè)應(yīng)用將實(shí)現(xiàn)如下功能：

我們先不關(guān)心 history API，先實(shí)現(xiàn)功能。下面是 html 關(guān)鍵代碼：

<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 關(guān)鍵代碼：

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’ } }}

實(shí)現(xiàn)后的效果如下：

當(dāng)修改下拉列表時(shí)，為了使瀏覽器地址也發(fā)生變化，需要使用 pushSate 方法：

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

此時(shí)會(huì)有個(gè)問(wèn)題，當(dāng)我們點(diǎn)擊前進(jìn)/后退時(shí)，瀏覽器地址變了，但對(duì)應(yīng)的數(shù)據(jù)卻不對(duì)。因此，當(dāng)進(jìn)行前進(jìn)/后退時(shí)，我們需要監(jiān)聽(tīng) popstate 重新過(guò)濾數(shù)據(jù)：

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

我們還需要處理頁(yè)面刷新的問(wèn)題。當(dāng)刷新頁(yè)面時(shí)，歷史記錄不會(huì)改變，history.state 的狀態(tài)值也保持不變。所以我們可以從 history.state 中取出當(dāng)前的狀態(tài)數(shù)據(jù)，利用 state.gender 的值就可以在 load 事件中來(lái)過(guò)慮出當(dāng)前 URL 對(duì)應(yīng)的用戶列表：

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

這是個(gè)簡(jiǎn)單的示例，你也可以繼續(xù)進(jìn)一步優(yōu)化。今天的分享就到這里，有問(wèn)題請(qǐng)?jiān)谙旅媪粞耘秪~

以上就是如何使用 JavaScript 操作瀏覽器歷史記錄 API的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 操作歷史記錄api的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！