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)如下功能：

1. 顯示用戶列表
2. 可以通過(guò)下拉框篩選“先生”和“女士”
3. 當(dāng)下列列表發(fā)生變化時(shí)，URL 也會(huì)相應(yīng)的變化

我們先不關(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)注腳本之家其它相關(guān)文章！

最新評(píng)論