歷史API
歷史API是瀏覽器讓你與地址欄和導航歷史進行交互的方式。 介紹 訪問歷史API 導航歷史 向歷史記錄中添加條目 修改歷史記錄條目 訪問當前的歷史記錄條目狀態 onpopstate事件 介紹 歷史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....