原文地址：http://www.jquerycn.cn/a_10532

本節主要內容：
使用JavaScript修改瀏覽器URL位址列

現在主流的瀏覽器，可以在不重新整理頁面的情況下修改瀏覽器URL;
在瀏覽過程中，可以將瀏覽歷史儲存起來，當在瀏覽器點選後退按鈕時，可以衝瀏覽歷史上獲得回退的資訊。

本文就介紹下它是如何工作的。
 

複製程式碼程式碼示例: var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History 物件 pushState() 這個方法有3個引數,你可以從上面的例子看到。

第一個引數，是一個Json物件，在儲存有關當前URl的任意歷史資訊。
第二個引數,title 就相當於傳遞一個文件的標題；
第三個引數是用來傳遞新的URL. 你將看到瀏覽器的位址列發生變化而當前頁面並沒重新整理。

例子，將在每個獨立的URL中儲存一些任意資料。
 

複製程式碼程式碼示例: for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
}
 

現在執行，點選瀏覽器的返回按鈕，檢視URL是怎麼改變的。
對於每次URL的改變，是因為它儲存了歷史狀態“id”以及對應的值。
但是，怎麼重新獲得歷史狀態，並且在此基礎上做些事情呢？
需要對“popstate”新增事件監聽器，這將會在每次歷史物件的狀態改變的時候觸發。

例子：
 

複製程式碼程式碼示例:

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
  alert(i);
}

window.addEventListener('popstate', function(event) {
  readState(event.state);
});

function readState(data){
  alert(data.id);
}
 

現在，無論何時點選返回按鈕，一個“popstate”事件就會被觸發。
事件偵聽器，然後檢索歷史狀態物件與之關聯的URL，並提示“id”的值。