window.history方法

DOM中的window對象通過window.history方法提供了對浏覽器曆史記錄的讀取，讓你可以在使用者的通路記錄中前進和後退。

從HTML5開始，我們可以開始操作這個曆史記錄堆棧，但是相容性不是太好。

1.history

使用back(),forward(),和go()方法可以在使用者的曆史記錄中前進和後退

前進和後退

後退：

    window.history.back();

這個方法會像使用者點選了浏覽器工具欄上的傳回鍵一樣。

同樣的，也可以用以下方法産生使用者前進行為：

    window.history.forward();

移動到曆史記錄中特定的位置

你可以使用go()方法從session曆史中載入特定的頁面。

向後移動一頁：

    window.history.go(-1);

向前移動一頁：

    window.history.go(1);

類似的，你可以前進或者後退多頁。

還可以通過檢查浏覽器曆史記錄的length屬性來找到曆史記錄堆棧中的頁面總數。

    var numberOfEntries = window.history.length;

注意: IE支援向go()方法傳URL參數。

2.添加和修改history實體

自Gecko2開始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

html5引入了histtory.pushState()和history.replaceState()這兩個方法，他們允許添加和修改history實體。同時，這些方法會和window.onpostate事件一起工作。

使用history.pushState()方法來修改referrer,這種方法可以被用在經過修改狀态後而為xmlhttpRequest對象建立的http header中。這個referrer會是建立XMLHttpRequest 時document的URL。

pushState 用于向 history 添加目前頁面的記錄，而 replaceState 和 pushState 的用法完全一樣，唯一的差別就是它用于修改目前頁面在 history 中的記錄。

例子

假設http://mozilla.org/foo.html頁面執行了一下js

    var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "test.html");

這種方法将會使url位址欄顯示http://mozilla.org/bar.html，但浏覽器不會加載bar.html頁面，即使這個頁面存在也不會加載。

現在再次假設使用者繼續通路http://google.com，然後點選後退。這時，url位址欄将會，http://mozilla.org/test.html，頁面會得到popstate事件（chrome），這個狀态對象會包含一個stateObj的copy。這個頁面看起來像foo.html。+

這時，我們再次點選後退，URL将變成http://mozilla.org/foo.html，document将得到另一個popstate事件和為null的state對象。這次的傳回動作并沒有改變文檔的内容。（也許會過一會嘗試加載…chrome）

pushState方法

pushState()有三個參數:state對象，标題(現在是被忽略，未作處理)，URL(可選)。具體細節：

         state對象 –state對象是一個JavaScript對象，它關系到由pushState()方法建立出來的新的history實體。用以存儲關于你所要插入到曆史 記錄的條目的相關資訊。State對象可以是任何Json字元串。因為firefox會使用使用者的硬碟來存取state對象，這個對象的最大存儲空間為640k。如果大于這個數 值，則pushState()方法會抛出一個異常。如果确實需要更多的空間來存儲，請使用本地存儲。

        title—firefox現在回忽略這個參數，雖然它可能将來會被使用上。而現在最安全的使用方式是傳一個空字元串，以防止将來的修改。或者可以傳一個簡短的标題來表示state      

   URL—這個參數用來傳遞新的history實體的URL，注意浏覽器将不會在調用pushState()方法後加載這個URL。但也許會過一會嘗試加載這個URL。比如在使用者重新開機了浏覽器後，新的url可以不是絕對路徑。如果是相對路徑，那麼它會相對于現有的url。新的url必須和現有的url同域，否則pushState()将抛出異常。這個參數是選填的，如果為空，則會被置為document目前的url。

某種意義上來說，調用pushState()方法很像設定了window.location = “#foo”,這兩者都會建立和激活另一個關聯到目前document的history實體，但pushState()另外有一些優點：

  新的url可以是任何和目前url同域的url，相比之下，如果隻設定hash，window.location會保持在同一個document。

如果不需要，你可以不修改url。對比而言，設定window.location = “#foo”;僅産生新的history實體，如果你目前的hash不是#foo

你可以将任意的資料與你的新history實體關聯。使用基于hash的方法，需要将所有相關的資料編碼為一個短字元串。注意，pushState()方法不會使hashchange時間發生，即使是新舊url隻是hash不同。

replaceState()方法

history.replaceState() 用起來很像pushState()，除了replaceState()是用來修改目前的history實體而不是建立一個新的。這個方法有時會很有用，當 你需要對某些使用者行為作反應而更新一個state對象或者目前history實體時，可以使用它來更新state對象或者目前history實體的url。

popstate事件

當history實體被改變時，popstate事件将會發生。如果history實體是有pushState和replaceState方法産生的，popstate事件的state屬性會包含一份來自history實體的state對象的拷貝

詳見window.onpopstate

讀取目前的state

讀取現有state

當頁面加載時，它可能會有一個非空的state對象。這可能發生在當頁面設定一個state對象(使用pushState或者replaceState)之後使用者重新開機了浏覽器。當頁面重新加載，頁面将收到onload事件，但不會有popstate事件。然而，如果你讀取history.state屬性，将在popstate事件發生後得到這個state對象