歷史API是瀏覽器讓你與地址欄和導航歷史進行交互的方式。
介紹
歷史API允許你與瀏覽器歷史進行交互，觸發瀏覽器導航方法並更改地址欄的內容。
它在現代的單頁應用程序中特別有用，這種應用程序通常不會為新頁面發出服務器端請求，而只是內容發生變化而已。
如果一個在瀏覽器中運行的現代JavaScript應用程序不明確地或在框架層面上與歷史API進行交互，將會給用戶帶來很差的體驗，因為前進和後退按鈕將無法使用。
同時，當導航應用程序時，視圖會改變，但地址欄不會變化。
且刷新按鈕無法使用：刷新頁面時，由於缺少深度鏈接，瀏覽器會顯示一個不同的頁面。
歷史API是在HTML5引入的，並且現在所有現代瀏覽器都支持。IE自10版就支持，如果你需要支持IE9及更早版本，可使用History.js庫。
訪問歷史API
歷史API可在window對象上使用，所以你可以像這樣調用它：window.history或history，因為window是全局對象。
導航歷史
先從歷史API中最簡單的操作開始。
返回上一頁：
history.back()
這將返回到會話歷史的前一個條目。你可以使用以下方式前往下一頁：
history.forward()
這和使用瀏覽器的前進和後退按鈕是一樣的。
go()方法可讓你多級路徑地返回或前進。例如：
history.go(-1) //等同於`history.back()`
history.go(-2) //等同於連續兩次調用`history.back()`
history.go(1) //等同於`history.forward()`
history.go(3) //等同於連續三次調用`history.forward()`
要知道歷史記錄中有多少條目，你可以調用：
history.length
向歷史記錄中添加條目
使用 pushState() 方法可以以程式方式創建一個新的歷史記錄條目。你需要傳遞3個參數。
第一個參數是一個對象，可以包含任何內容（然而有大小限制並且對象需要可序列化）。
第二個參數目前由主要瀏覽器未用到，因此通常傳遞空字符串。
第三個參數是與新狀態相關聯的URL。請注意，該URL必須屬於與當前URL相同的起源域。
const state = { name: 'Flavio' }
history.pushState(state, '', '/user')
調用此方法不會更改頁面的內容，也不會引起任何像更改window.location一樣的瀏覽器動作。
修改歷史記錄條目
pushState() 可以添加新的狀態到歷史記錄，而replaceState()則可以編輯當前的歷史記錄狀態。
history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')
如果你現在調用
history.back()
瀏覽器會直接跳轉到/posts，因為/post/first被/post/second所替換。
訪問當前的歷史記錄條目狀態
訪問屬性
history.state
會返回當前的狀態對象（即傳遞給pushState或replaceState的第一個參數）。
onpopstate事件
每次活動的歷史狀態更改時，onpopstate事件都會在window上被觸發，並以當前狀態作為回調參數。
window.onpopstate = event => {
console.log(event.state)
}
每次調用history.back()、history.forward()或history.go()時都會記錄新狀態對象（傳遞給pushState或replaceState的第一個參數）。