使用 JavaScript 操作瀏覽器歷史記錄 API
阿新 • • 發佈：2020-11-19
History 是 window 物件中的一個 JavaScript 物件，它包含了關於瀏覽器會話歷史的詳細資訊。你所訪問過的 URL 列表將被像堆疊一樣儲存起來。瀏覽器上的返回和前進按鈕使用的就是 history 的資訊。
History 物件包含長度屬性，它包含了會話歷史記錄棧中的 URL 數量。例如，如果使用者在瀏覽器中開啟一個標籤頁，歷史記錄的長度將是 1（新的標籤頁也是一個網頁）。然後使用者輸入一個網址 foo.com 並點選回車，現在歷史記錄物件的長度將是 2, 使用者轉到其他頁面 bar.com，歷史記錄物件的長度將就是 3 了。
## Back 和 Forward 方法
你可以使用 history 物件的 `back` 和 `forward` 方法來瀏覽網頁。例如，如果你想轉到上一個頁面，那麼可以使用：
```javascript
history.back()
```
同樣的，如果你想轉到下一頁，你可以使用：
```javascript
history.forward()
```
## Go 方法
如果您想向前或向後移動 n 個頁面，那麼您可以使用 go 方法：
```javascript
history.go(-2) // 倒退 2 頁
history.go(2) // 前進 2 頁
```
所以 `history.go(1)` 和 `history.forward()` 效果是相同的，`history.go(-1)` 和 `history.go(-1)` 效果是相同的。`history.go` 方法的預設值為 0，如果不傳任何數字，則當前頁面會被重新整理。
```javascript
window.history.go(0)
window.history.go()
```
## PushState
你也可以使用 `pushState` 和 `replaceState` 方法改變頁面的 URL。`pushState` 會改變頁面的 URL，並將改變後的 URL 新增到 `history` 物件的 URL 棧頂部。語法如下：
```javascript
history.pushState(state, title, url)
```
引數 state 是狀態資料，它將被儲存在 history.state 變數中。引數 title 是標題文字，不過它對大多數瀏覽器都沒有效果，所以一般傳空字串（""）或傳 null 就可以了。
讓我們在控制檯中嘗試一下，在執行之前，比如開啟 baidu.com，然後在控制檯輸入：
```javascript
history.pushState('123', '', 'new-url')
```
執行上面的程式碼後，它會將頁面位址列中的 URL 改為 baidu.com/new-url，同時將 URL 新增到 history 物件中。此時檢查 `history.length` 會增加 1。
除此之外，我們還可以為每個 URL 儲存狀態（當前頁面的資料）。在上面的例子中，你會把 "123" 儲存在 `history.state` 變數中，當你返回到這個頁面時，你就可以 `history.state` 再次拿到到這些資料。例如：
```javascript
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 事件：
```javascript
window.addEventListener('popstate', (e) => console.log(e))
```
然後呼叫 pushState：
```javascript
history.pushState({ name: 'test1' }, 'title', 'test1')
```
然後按下返回按鈕，popstate 事件就會被觸發，你可以在監聽事件中檢視打印出來的資料。在列印的資料中，可以找到 history.state 的值。
註冊 pushState 中的 url 可以是完整的 url，但必須和當前頁面是相同的域名，否則會丟擲跨域異常。
瀏覽器還有一個 `replaceState` API，和 `pushState` 的區別是，它只改變了 URL，不會將 URL 新增到歷史記錄，這裡就不再累述了。
## 例項演示
現在我們做一個小的網頁應用，這個應用將實現如下功能：
1. 顯示使用者列表
2. 可以通過下拉框篩選“先生”和“女士”
3. 當下列列表發生變化時，URL 也會相應的變化
我們先不關心 history API，先實現功能。下面是 html 關鍵程式碼：
```html
- 張先生
- 李女士
- 王女士