Html5 History API解析

瀏覽器前進與回退操做

在傳統的瀏覽器中咱們只能經過調用window.history對象的 forward() 、 back() 或 go(number|url) 方法來進行頁面的前進、回退或跳轉到某一頁面。

而Ajax技術出現出現後咱們經常用來實現頁面無刷新的局部渲染效果，但卻沒法對無刷新的頁面進行前進和後退的操做。

顯然，HTML 5標準制定者也考慮到這一點，因而在HTML 5中爲history對象新增了 pushState() 、 replaceState() 接口以及state屬性

state屬性

state屬性的值爲對象（默認值爲null），該值由用戶經過pushState()方法傳入，用於記錄與改條歷史記錄相關的頁面數據信息

pushState(state, title, url)

pushState()方法包含三個參數：

• state： 用戶爲該條歷史記錄寫入的數據對象來存儲頁面相關數據信息
• title：頁面標題
• url：頁面url

在HTML 5中，咱們使用history.pushState()會往history中寫入一條歷史記錄，history.length的值也會+1，history.state被傳入的state對象覆蓋。

replaceState(state, title, url)

replaceState()方法的三個參數和pushState()相同，但replaceState()用於修改當前頁的歷史記錄。

如何使用state對象？

HTML5除了帶給咱們以上三個新增的接口之外，還容許瀏覽器在window上監聽popState事件，每當對頁面進行前進或後退的操做時，瀏覽器會從歷史記錄中取出state對象並經過參數傳入popState事件的回調函數中：

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 使用state作點事情
    */                                            
});

這部分的API比較少，也沒什麼好講的，權當作個記錄，END