JavaScript HTML5腳本程式設計——“曆史狀态管理”的注意要點

曆史狀态管理是現代Web應用開發中的一個難點。在現代Web應用中，使用者的每次操作不一定會打開一個全新的頁面，是以“後退”和“前進”按鈕也就失去了作用，導緻使用者很難在不同狀态間切換。

要解決這個問題，首選使用

• hashchange

  事件（第13章曾讨論過）。HTML5通過更新

• history

  對象為管理曆史狀态提供了友善。

通過hashchange事件，可以知道URL的參數什麼時候發生了變化，即什麼時候該有所反應。而通過狀态管理API，能夠在不加載新頁面的情況下改變浏覽器的URL。為此，需要使用

• history.pushState()

  方法，該方法可以接收三個參數：狀态對象、新狀态的标題和可選的相對URL。

例如：

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");
           

執行

• pushState()

  方法後，新的狀态資訊就會被加入曆史狀态棧，而浏覽器位址欄也會變成新的相對URL。

但是，浏覽器并不會真的向伺服器發送請求，即使狀态改變之後查詢location.href也會傳回與位址欄中相同的位址。另外，第二個參數目前還沒有浏覽器實作，是以完全可以隻傳入一個空字元串，或者一個短标題也可以。而第一個參數則應該盡可能提供初始化頁面狀态所需的各種資訊。

因為pushState()會建立新的曆史狀态，是以你會發現“後退”按鈕也能使用了。按下“後退”按鈕，會觸發window對象的

• popstate

  事件 。popstate事件的事件對象有一個

• state

  屬性，這個屬性就包含着當初以第一個參數傳遞給pushState()的狀态對象。

如：

EventUtil.addHandler(window, "popstate", function(event){
    var state = event.state;
    if (state){   //第一個頁面加載時state為空
        processState(state);
    }
});
           

得到這個狀态對象後，必須把頁面重置為狀态對象中的資料表示的狀态（因為浏覽器不會自動為你做這些）。記住，浏覽器加載的第一個頁面沒有狀态，是以單擊“後退”按鈕傳回浏覽器加載的第一個頁面時，event.state值為null。

要更新目前狀态，可以調用

• replaceState()

  ，傳入的參數與pushState()的前兩個參數相同。調用這個方法不會在曆史狀态棧中建立新狀态，隻會重寫目前狀态。

history.replaceState({name:"Greg"}, "Greg's page");