使用 JavaScript 操作瀏覽器歷史記錄 API

前端小蜜蜂發表於2020-11-19
JavaScript瀏覽器API

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 新增到歷史記錄，這裡就不再累述了。

例項演示

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

  1. 顯示使用者列表
  2. 可以通過下拉框篩選“先生”和“女士”
  3. 當下列列表發生變化時，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)
}

當我們在下拉框選擇“先生”時，瀏覽器的地址會變成：localhost:5000/male。效果如下：

此時會有個問題，當我們點選前進/後退時，瀏覽器地址變了，但對應的資料卻不對。因此，當進行前進/後退時，我們需要監聽 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)
})

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

相關文章