history pushState 實現瀏覽器前進與後退

        今天做了個介面需要用到ajax進行頁面跳轉，當然使用ajax進行頁面跳轉有它的優點，比如降低伺服器壓力，縮短使用者等待時間等，但是一個很明顯的缺點就是瀏覽器的前進和後退按鈕失效了，好在HTML5的history物件的出現比較好的解決了這個問題，所以去網上找一些pushState使用的文章，但是大多數都是隻講原理沒有實現的例項，理解起來還是不太容易的。現在將我理解的一些內容說一下，不對的地方歡迎大家指出。

首先講一下API：

      首先是方法有兩個history.pushState()和history.replaceState()

     事件有一個window.onpopstate

     pushState（）方法，接收三個引數

             a state object, a title (which is currentlyignored), and (optionally) a URL

            state物件儲存的是被pushState頁面的資訊的一個拷貝，也就是說以後你要用到的資訊，都可以放到這個物件中。

            url是可選的，負責改變瀏覽器的位址列中顯示的url,如果沒有指定url，你點選前進後退按鈕頁面還是會變化，只是瀏覽器的位址列上顯示的url會一直保持不變。

    replaceState（）方法，與pushState方法相同，主要用於改變當前歷史記錄中記錄的當前頁面的state物件和url資訊。

    onpopstate事件,每次點選瀏覽器的前進和後退按鈕，就會觸發window的Onpopstate事件。

    最後使用history.state獲取當前所在頁面的state物件，也就是在上面pushState中儲存的。

下面以一個例子具體說明。

         首先，我們一般做一個網站，剛進去的首頁是沒有pathname的，為了讓瀏覽器能夠後退到首頁，我們對首頁的url進行攔截，即改變首頁的url。這裡面history.replaceState只是改變網頁的url地址，不會改變網頁內容。這裡面的state儲存的是你要在將來獲取到的任何資訊。

       var url = “blog/index.html”;

      var state = {

                            url:url

         }

      history.replaceState(state,””,"blog/index.html");

     接下來,當呼叫ajax使頁面內容傳送變化之後，我們將這個變化的頁面狀態儲存起來，如

       var url = “blog/index.html”;

          var state = {

                      url:url

           }

         window.history.pushState(state,"",url);

    最後，給window新增監聽，當popstate被觸發之後，我們通過history.state獲取到達頁面的資訊，通過.操作符獲取該頁面的資訊，如我這裡儲存了該頁面的url，就通過history.state.url獲取，然後通過這個url載入頁面。

     window.addEventListener("popstate",function() {

     var currentUrl = history.state.url;

           $(".container").load(currentUrl +" #container");                                                         

    });