最近研究pushState，看了網上的文章還是不怎麼會用，於是自己摸索著理解使用，終於實現區域性重新整理同時前進後退。

首先說說pushState()，這個函式將當前的url等資訊加入history堆疊中；

當點選瀏覽器的前進後退按鈕時，會觸發popstate事件，所以可以在onpopstate的時候使用ajax實現區域性重新整理前進後退。

我的方法(用jQuery)：

1、定義兩個函式

function ajaxLoad(){
//裡面載入ajax
};
function setState(){
var stateobj = ({//裡面存放url等資訊，stateobj將作為pushState()的第一個引數
url:url,
title:title
});
window.history.pushState(stateobj,null,url);//將當前url加入堆疊中
};
 

$('a').on('click',function(event){//假設點選a標籤載入ajax
event.preventDefault();//防止跳轉
ajaxLoad();
setState();
});

window.addEventListener('popstate', function(event) {
var state = event.state;//取得目標url的state，這樣就可以通過state.url等方式訪問之前stateobj中的內容
ajaxLoad();
//注意：此處不要呼叫setState();了，因為在歷史記錄堆疊中跳轉時不需要往堆疊中寫入資料
});
 

注意：

ajax載入進來的元素（如a、button標籤等）如有事件要在載入後重新繫結事件；

前端小白學習時所得，如有更好的方法歡迎討論，程式碼寫得菜求輕噴~