history物件之pushState，replaceState
瀏覽器有一個history物件，用來儲存瀏覽歷史，使用者可以通過點選瀏覽器的後退或前進按鈕在歷史記錄中切換。之前對history的操作的API主要是前進、後退、跳轉等，而在HTML5中提供了2個新方法來管理history。

history.pushState(state, title, url);
history.replaceState(state, title, url);

引數說明

• state：一個與指定歷史記錄相關聯的狀態物件，當popstate事件觸發時，會把該物件傳入回撥函式。如果不需要用到，可以傳null。
• title：頁面的標題。但當前大多數瀏覽器都不支援或忽略這個值。可以傳null。
• url：新增或修改的history的網址。為了安全性，必須保持與當前URL同一個域。

簡而言之，兩個方法的區別只是pushState新增一個最新的歷史記錄，而replaceState則是把當前的頁面的歷史記錄替換掉。他們最大的特點是新增或替換歷史記錄後，瀏覽器位址列會變成你傳的地址，而頁面並不會重新載入或跳轉。

例如，假設當前的頁面地址是example.com/1.html，且history中此時只有一條當前頁面的記錄。

• 當你執行 history.pushState(null, null, “2.html”)後，瀏覽器的位址列會顯示example.com/2.html，但並不會跳轉到2.html，甚至並不會去檢查2.html存不存在，只是加入一個最新的歷史記錄項。此時history中會有兩個記錄。假如你此時點選頁面上的link跳轉到另外一個頁面後，點選瀏覽器的後退按鈕，則url會變成example.com/2.html，如果此前的1.html的頁面瀏覽器有快取的話會顯示1.html的內容，否則會發起請求example.com/2.html。如果再次點後退，url會變成example.com/1.html。
• 而如果執行 history.replaceState(null, null, “2.html”)的話，瀏覽器的位址列也會顯示example.com/2.html，區別是history中只有當前2.html的記錄，而1.html的記錄已被替換掉。

利用這些特性，可以用來修改當前頁面的URL來達成某些目的，比如可以用來記住搜尋條件。

如果頁面是資料展示的頁面，頁面上有一些搜尋或過濾的條件，當用戶點選這些條件時，頁面通過AJAX把結果呈現到頁面上，當點選某個結果頁面跳轉到下一個頁面後，使用者點選瀏覽器的後退按鈕回到前一個頁面後，即使頁面有快取，AJAX獲取的結果也不會保留在頁面上。如果後退後，需要記住此前的搜尋條件和結果，可以在使用者點選搜尋條件時，把搜尋條件利用history.replaceState

if (history.replaceState) {
    history.replaceState(condition, null, "?" + $.param(condition, true));
}

頁面可以設定成no-cache，當用戶後退時，瀏覽器會重新請求帶搜尋條件的URL，後臺根據搜尋條件，把對應的結果頁面呈現出來，從而達到記住搜尋條件和結果的目的。