盡管是上面講到的《JavaScript高級程序設計》(第二版)中提到，BOM中的location.path/query…… (window.location)在通過JavaScript更改以后，瀏覽器都會通過刷新來到達你更改后的URL(location的意思就是位 置。。)
而在JavaScript MVC開始流行之后，通過刷新來修改URL的方法，不禁讓人感到煩躁。然而HTML5中就制定了一個這樣的API，可以通過方法的方式來修改URL，而又不會使瀏覽器刷新，就是History API。
熟悉JavaScript開發的同學，對History肯定不會陌生，其中最經典的方法就是go，通過第一個類型為整數的傳輸參數，可以使瀏覽器到達當前頁面之前或之后，曾經瀏覽過的頁面。當然，這個也是要刷新來實現的。
現在History API新增了兩個方法，分別是pushState和replaceState，其實用法都一樣，看Mozilla的文檔也沒看到它們有多大不同，哈哈。
用法如下：
var state = { //這里可以是你想給瀏覽器的一個State對象，為后面的StateEvent做准備。
title : "HTML 5 History API simple demo",
url : "yourpage"
};
history.pushState(state, "HTML 5 History API simple demo", "yourpage");
還算簡單吧，那么replaceState也是同樣的用法：
var state = { //這里可以是你想給瀏覽器的一個State對象，為后面的StateEvent做准備。
title : "HTML 5 History API simple demo",
url : "yourpage"};
history.replaceState(state, "HTML 5 History API simple demo", "yourpage");
State Event
既然有無刷新改變URL的方法，當然也要有響應這個改變的時間啦。
嗯，沒錯。就有一個popstate事件，而傳入的handler函數有一個參數，就是之前在pushState的第一個參數，一個State obj。開發者可以通過這個State obj來識別行為。詳細代碼如下：
var state = { //這里可以是你想給瀏覽器的一個State對象，為后面的StateEvent做准備。
title : "HTML 5 History API simple demo",
url : "yourpage"
};
history.pushState(state, "HTML 5 History API simple demo", "yourpage");
window.onpopstate = function (e) { document.title = e.state.title;}
當然還可以這樣：
var state = { //這里可以是你想給瀏覽器的一個State對象，為后面的StateEvent做准備。
action : "page",
title : "HTML 5 History API simple demo",
url : "yourpage"
};
history.pushState(state, "HTML 5 History API simple demo", "yourpage");
window.onpopstate = function (e) {
switch (e.state.action) {
case "home" :
document.title = "HOME ……";
$.get("index.php").done(function (data) { $("#wrapper").html(data); });
break;
case "page" :
document.title = e.state.title;
$.get(e.state.url).done(function (data) { $("#wrapper").html(data); });
break;
}
}