pushState和replaceState是H5的API中新添加的兩個方法。通過window.history方法來對瀏覽器歷史記錄的讀寫。
pushState和replaceState
在 HTML 文件中, history.pushState() 方法向瀏覽器歷史添加了一個狀態。
pushState() 帶有三個參數：一個狀態對象，一個標題（現在被忽略了），以及一個可選的URL地址。
- state object — 狀態對象是一個由
pushState()方法創建的、與歷史紀錄相關的JS對象。當用戶定向到一個新的狀態時，會觸發popstate事件。事件的state屬性包含了歷史紀錄的state對象。（譯者注：總而言之，它存儲JSON字符串，可以用在popstate事件中。）state
對象可以是任何可以序列化的東西。由於 火狐
會將這些對象存儲在用戶的磁盤上，所以用戶在重啟瀏覽器之后這些state對象會恢復，我們施加一個最大640k
的字符串在state對象的序列化表示上。如果你像pushState() 方法傳遞了一個序列化表示大於640k
的state對象，這個方法將扔出一個異常。如果你需要更多的空間，推薦使用sessionStorage或者localStorage。 - title —
火狐瀏覽器現在已經忽略此參數，將來也許可能被使用。考慮到將來有可能的改變，傳遞一個空字符串是安全的做法。當然，你可以傳遞一個短標題給你要轉變成的狀態。（譯者注：現在大多數瀏覽器不支持或者忽略這個參數，最好用null代替） - URL —
這個參數提供了新歷史紀錄的地址。請注意，瀏覽器在調用pushState()方法后不會去加載這個URL，但有可能在之后會這樣做，比如用戶重啟瀏覽器之后。新的URL不一定要是絕對地址，如果它是相對的，它一定是相對於當前的URL。新URL必須和當前URL在同一個源下;否則，pushState()
將丟出異常。這個參數可選，如果它沒有被特別標注，會被設置為文檔的當前URL。
一些情況下，調用pushState和設置 window.location = “#foo”相當，這種狀況下，這兩種行為都會創建和激活另一個和當前頁面有關的歷史紀錄。但是pushState()有其他優勢：
新URL可以是當前URL同源下的任意地址。相反的，設置window.location會讓你保持在相同頁面，除非你只修改hash.
如果不必要，你可以不改變URL，相反的，將window.location設定為“#foo”；只會創建一個新的歷史紀錄，如果當前hash不為#foo.
You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你可以關聯任意的數據到你的新歷史紀錄中。使用基於hash的方法，你需要將所有相關 的數據編碼為一個短字符串。
請注意pushState()方法絕不會導致hashchange 事件被激活，即使新的URL和舊的只在hash上有區別。
語法
pushState()和replaceState()參數一樣，參數說明如下：
history.pushState(state, title, url);
-
state：存儲JSON字符串，可以用在popstate事件中。
-
title：現在大多數瀏覽器不支持或者忽略這個參數，最好用null代替
-
url：任意有效的URL，用於更新瀏覽器的地址欄，並不在乎URL是否已經存在地址列表中。更重要的是，它不會重新加載頁面。
兩個方法的主要區別：pushState()是在history棧中添加一個新的條目，replaceState()是替換當前的記錄值。
popstate
當前活動歷史項(history entry)改變會觸發popstate事件。調用history.pushState()創建新的歷史項(history entry)，或調用history.replaceState()替換新的歷史項(history entry)，那么popstate事件的state屬性會包含歷史項(history entry)狀態對象(state object)的拷貝。
需要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調用history.back()）
不同的瀏覽器在加載頁面時處理popstate事件的形式存在差異。頁面加載時Chrome和Safari通常會觸發(emit )popstate事件，但Firefox則不會。
當瀏覽器觸發返回和前進時觸發：
window.onpopstate = function(e) { console.log(e.state); };
參考：https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/