這次帶給大家pushState與replaceState使用步驟詳解，pushState與replaceState使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、簡介
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,条目索引为1 history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2 history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3 history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // 弹出 "location: http://example.com/example.html, state: null history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
八、pushState()的用途
王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：
window.onpopstate可以监听到返回键事件
当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：
window.onhashchange可以监听到返回键事件
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是pushState與replaceState使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
