【本文源址：http://blog.csdn.net/q1056843325/article/details/60607402 轉載請新增該地址】

AJAX技術對我們前端產生了巨大影響
可以讓我們的頁面無重新整理操作減少網路請求
但是它也產生了一些問題
不能夠使用瀏覽器的前進與後退
（後退是瀏覽器非常常用的按鈕）

很久很久以前，Gmail藉助iframe解決了這個問題
但現在，HTML5提供了超級簡單的API

pushState與onpopstate

history.pushState(stateObject, title, url)
包含三個引數
分別是狀態物件、新狀態標題和可選引數相對URL
第一個引數狀態物件應該傳入提供頁面狀態資訊的資料
第二個引數還沒有瀏覽器實現
新增也沒有什麼用，所以可以傳入一個空字串
如果使用了第三個引數，那麼執行這個函式後，瀏覽器地址也會更新
但是不會真的向伺服器傳送請求

當我們從狀態棧中的一個狀態跳到另一個狀態popstate事件就會觸發
（瀏覽器前後翻頁觸發，重新整理頁面不觸發）
它的事件物件中有一個state屬性儲存著當初傳遞給pushState()的狀態物件

下面通過一個小例子來解釋一下

<button id="next">下一頁</button>
當前頁數：<span id="cur">0</span>

要實現點選下一頁，然後當前頁數對應增加

var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0; //表示當前頁數
next.onclick = function(){
  page++;
  cur.innerHTML = page;
}

這時我們還不能使用瀏覽器的上下翻頁

---

現在使用history API來新增一些程式碼

var next = document.getElementById('next');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){
  page++;
  history.pushState({page: page}, '','?page=' + page);
  //狀態物件中儲存當前頁數
  cur.innerHTML = page;
}
window.onpopstate = function(e){
  if(e.state){
    cur.innerHTML = e.state.page;
  }else{
    cur.innerHTML = 0;
  }
}

當點選“後退”按鈕回到最開始時（第0頁）
因為沒有狀態，所以e.state值為null

replaceState

除此之外還有一個API用於更新狀態
引數與pushState()前兩個引數相同
呼叫這個方法就會重寫當前的狀態
也就是說替換當前的記錄

<button id="next">下一頁</button>
<button id="update">更新樣式</button>
當前頁數：<span id="cur">0</span>

var next = document.getElementById('next');
var update = document.getElementById('update');
var cur = document.getElementById('cur');
var page = 0;
next.onclick = function(){
  page++;
  history.pushState({page: page}, '','?page=' + page);
  cur.innerHTML = page;
}
update.onclick = function(){
  history.replaceState({page: history.state.page + '(已讀)'},'');
  //部分瀏覽器實現了history.state返回當前狀態
}
window.onpopstate = function(e){
  if(e.state){
    cur.innerHTML = e.state.page;
  }else{
    cur.innerHTML = 0;
  }
}

---

HTML5歷史狀態管理只有簡單的幾個函式
短短几行程式碼，就可以增加狀態記錄的功能
現在各個瀏覽器都實現了這個功能

==主頁傳送門==