HTML5- history

文章引用於: http://www.cnblogs.com/stephenykk/p/5057022.html

API 實例

HTML5 history API只包括2個方法：history.pushState()和history.replaceState()，以及1個事件：window.onpopstate。
history.pushState(state, title, url)
調用pushState()方法將新生成一條歷史記錄，方便用瀏覽器的「後退」和「前進」來導航（「後退」但是至關經常使用的按鈕）。另外，從URL的同源策略能夠看出，HTML5 history API的出 發點是很明確的，就是讓無跳轉的單站點也能夠將它的各個狀態保存爲瀏覽器的多條歷史記錄。當經過歷史記錄從新加載站點時，站點能夠直接加載到對應的狀態

• state，它能夠理解爲一個拿來存儲自定義數據的元素。它和同時做爲參數的url會關聯在一塊兒。
• title，是一個字符串，目前各種瀏覽器都會忽略它（之後纔有可能啓用，用做頁面標題），因此設置成什麼都不要緊。目前建議設置爲空字符串。
• url 第3個參數是URL地址，通常會是簡單的?page=2這樣的參數風格的相對路徑，它會自動以當前URL爲基準。須要注意的是，本參數URL須要和當前頁面URL同源，不然會拋出錯誤。

history.replaceState()
它和history.pushState()方法基本相同，區別只有一點，history.replaceState()不會新生成歷史記錄，而是將當前歷史記錄替換掉。

window.onpopstate
在只有點擊瀏覽器的「前進」、「後退」這些導航按鈕，或者是由JavaScript調用的history.back()等導航方法，且切換先後的兩條歷史記錄都屬於同一個網頁文檔，纔會觸發本事件。

實例

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 該幹嗎幹嗎
    */                                          
});