不得不佩服下谷歌Chrome團隊，利用HTML5和CSS3實現了一本相當漂亮的在線電子書：《關于瀏覽器和互聯網20件事》。

訪問地址：http://www.20thingsilearned.com

話說這本電子書已經出來很久了，不過今天來看依然覺得相當的贊。我們無需刷新頁面，就可以來回切換電子書頁面，這正是OPOA（One Page One Application）的完美體現。

現在正在學習關于history API這方面的東西，所以特別感興趣的是他們如何使用window.history.pushState()和window.history.replaceState()來做頁面之間的不刷新切換。

今天查閱了一些資料，基本上對history API有了一個基本了解。

首先要說的就是history是個全局，即window.history。看到這個變量名你一定很熟悉，因為經常可以看到用window.history.back()或者window.history.go(-1)來返回上一頁的JavaScript代碼。

所以history并不是什么新東西，在HTML4的時代，我們可以使用它的這幾個屬性和方法：

length：歷史堆棧中的記錄數。

back()：返回上一頁。

forward()：前進到下一頁。

go([delta])：delta是個數字，如果不寫或為0，則刷新本頁；如果為正數，則前進到相應數目的頁面；若為負數，則后退到相應數目的頁面。

現在，HTML5為其又添加了以下2個方法：

pushState(data, title [, url])：往歷史堆棧的頂部添加一條記錄。data為一個對象或null，它會在觸發window的popstate事件(window.onpopstate)時，作為參數的state屬性傳遞過去；title為頁面的標題，但當前所有瀏覽器都忽略這個參數；url為頁面的URL，不寫則為當前頁。

replaceState(data, title [, url])：更改當前頁面的歷史記錄。參數同上。這種更改并不會去訪問該URL。不過目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老瀏覽器的話，可以試試History.js，而且它還修正了一些bug。

當然，在移動平臺上，我們可以大膽嘗試html5的history API。ios3.0+ 和Android2.0+ 平臺的內置瀏覽器對history都比較完美了，利用它我們可以web app更趨向與native app。

下面，推薦幾篇文章：

.Manipulating the browser history

.Session history and navigation

.Manipulating History for Fun & Profit