HTML5引入了history.pushState() 和history.replaceState() 方法，它們分別可以新增和修改歷史記錄條目。這些方法通常與window.onpopstate 搭配使用。
二、pushState() 方法的例子假設在http://mozilla.org/foo.html 中執行了以下JavaScript 程式碼:
var stateObj = { foo: bar };history.pushState(stateObj, page 2, bar.html);這將使瀏覽器網址列顯示為http://mozilla.org/bar.html，但不會導致瀏覽器載入bar.html ，甚至不會檢查bar.html 是否存在。
假設現在使用者又造訪了http://google.com，然後點選了返回按鈕。此時，網址列將顯示http://mozilla.org/bar.html，同時頁面會觸發popstate 事件，事件物件state中包含了stateObj 的一份拷貝。頁面本身與foo.html 一樣，儘管其在popstate 事件中可能會修改自身的內容。
如果我們再點選返回按鈕，頁面URL會變成http://mozilla.org/foo.html，文件物件document會觸發另一個popstate 事件，這次的事件物件state object為null。 這裡也一樣，回傳並不改變文件的內容，儘管文件在接收popstate 事件時可能會改變自己的內容，其內容仍與先前的展現一致。
三、pushState() 方法pushState() 需要三個參數: 一個狀態物件, 一個標題(目前被忽略), 和(可選的) 一個URL. 讓我們來解釋下這三個參數詳細內容：
狀態對象— 狀態對象state是一個JavaScript對象，透過pushState () 建立新的歷史記錄條目。無論何時使用者導覽到新的狀態，popstate事件就會被觸發，而該事件的state屬性包含該歷史記錄條目狀態物件的副本。
標題— 目前忽略這個參數被忽略，但未來可能會用到。傳遞一個空字串在這裡是安全的，而在將來這是不安全的。二選一的話，你可以為跳轉的state傳遞一個短標題。
URL — 此參數定義了新的歷史URL記錄。請注意，呼叫pushState() 後瀏覽器並不會立即載入這個URL，但可能會在稍後某些情況下載入這個URL，例如在使用者重新開啟瀏覽器時。新URL不必須為絕對路徑。如果新URL是相對路徑，那麼它將被視為相對於目前URL處理。新URL必須與目前URL同源，否則pushState() 會拋出一個例外。此參數是可選的，預設為目前URL。
四、pushState() 方法與設定hash值的區別在某種意義上，呼叫pushState() 與設定window.location = #foo 類似，二者都會在目前頁面建立並啟動新的歷史記錄。但pushState() 有以下幾個優點：
新的URL 可以是與目前URL同源的任意URL 。而設定window.location 只有當你只修改了哈希值時才保持同一個檔案。
如果需要，可以不必改變URL就能建立一筆歷史記錄。而設定window.location = #foo;,只有在目前哈希不是#foo 的情況下， 才會建立一個新的歷史記錄項目。
我們可以為新的歷史記錄項關聯任意資料。而基於哈希值的方式，則必須將所有相關資料編碼到一個短字串裡。
五、replaceState() 方法history.replaceState() 的使用與history.pushState() 非常相似，區別在於replaceState() 是修改了當前的歷史記錄項而不是新建一個。
六、popstate 事件每當處於啟動狀態的歷史記錄條目發生變化時,popstate 事件就會在對應window物件上觸發。 如果目前處於啟動狀態的歷史記錄條目是由history.pushState()方法建立,或由history.replaceState()方法修改過的, 則popstate事件物件的state屬性包含了這個歷史記錄條目的state物件的一個拷貝。
我們也可以直接在history物件上取得state，如下：
var currentState = history.state;
需要注意的是，呼叫history.pushState() 或history.replaceState() 不會觸發popstate 事件。 opstate事件只會在瀏覽器某些行為下觸發， 例如點選後退、前進按鈕(或在JavaScript中呼叫history.back()、history.forward()、history.go()方法)。
七、popstate 事件的例子假如目前網頁位址為http://example.com/example.html ,則執行下述程式碼後:
window.onpopstate = function(event) { alert(location: + document.location + , state: + JSON.stringify(event.state));};//綁定事件處理函數. history.pushState({page: 1 }, title 1, ?page=1); //新增並啟動一個歷史記錄條目http://example.com/example.html?page=1,條目索引為1history.pushState({page: 2}, title 2, ?page=2); //新增並啟動一個歷史記錄條目http://example.com/example.html?page=2,條目索引為2history.replaceState({page: 3}, title 3, ?page=3); //修改目前啟動的歷史記錄條目http://ex..?page=2 變成http://ex..?page=3,條目索引為3history.back(); // 彈出location: http: //example.com/example.html?page=1, state: {page:1}history.back(); // 彈出location: http://example.com/example.html, state: nullhistory.go( 2); // 彈出location: http://example.com/example.html?page=3, state: {page:3}八、pushState()的用途王二使用pushState() 主要是它可以監聽到瀏覽器上的返回事件，這在行動端上也同樣適用，參考如下一段程式碼(可以直接運行）：
<body> <div>window.onpopstate可以監聽到回傳鍵事件</div> <script> history.pushState({}, ); window.onpopstate = function(event) { //這裡可以監聽到瀏覽器的傳回事件，並做你想做的事情， //例如：跳到另一個網頁location.href = https://www.baidu.com; }; </script></body>當然，用window.onhashchange 也可以監聽到瀏覽器上的回傳事件，參考如下一段程式碼(可以直接執行）：
<body> <div>window.onhashchange可以監聽到回傳鍵事件</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange = function(event) { location.href = https://www.baidu.com; } },200); </script></body>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。