HTML5歷史記錄API的使用方法，在線實例演示HTML5歷史記錄API如何使用、瀏覽器的兼容性、語法定義及它的屬性值詳細資料等。
HTML5歷史記錄API使您可以通過JavaScript訪問瀏覽器導航歷史記錄。HTML5歷史記錄API在單頁Web應用程序中非常有用。單頁Web應用程序可以使用HTML5歷史記錄API來使應用程序中的某個狀態(tài)"可標記"。稍后，我將回到如何使用歷史記錄API在單頁應用程序中建立可標記狀態(tài)。
瀏覽歷史由一堆URL組成。每次用戶在同一個網(wǎng)站中瀏覽時，新頁面的URL都會放在堆棧的頂部。當用戶單擊"后退"按鈕時，堆棧中的指針將移動到堆棧中的上一個元素。如果用戶再次單擊"前進"按鈕，則指針將向前移到堆棧上的最頂層元素。如果用戶單擊"后退"，然后單擊新鏈接，則堆棧中最頂層的元素將被新的URL覆蓋。
這是歷史記錄堆棧的示例：
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
在上述歷史記錄堆棧中訪問的最后一頁是http://myapp.com/great-new-story.html。如果用戶單擊"后退"按鈕，則歷史記錄堆棧中的指針將移回 http://myapp.com/news.html。如果用戶單擊"前進"按鈕，則歷史記錄堆棧指針將向前移動http://myapp.com/great-new-story.html，但是如果用戶單擊另一個鏈接(在http://myapp.com/news.html頁面上)，則該鏈接的URL將http://myapp.com/news.html在歷史記錄堆棧中覆蓋 。
HTML5歷史記錄API使Web應用程序可以訪問該歷史記錄堆棧。
HTML5歷史記錄API僅允許網(wǎng)頁訪問部分瀏覽歷史記錄，該部分與網(wǎng)頁本身位于同一域中。出于安全原因，歷史記錄API中的此限制是必需的，因此網(wǎng)頁無法查看用戶訪問過哪些其他網(wǎng)站。
同樣，HTML5歷史記錄API不允許網(wǎng)頁將URL推入歷史記錄堆棧中，該URL與網(wǎng)頁的域不在同一域中。該限制確保了當用戶開始輸入網(wǎng)頁時，網(wǎng)頁不能假裝已將用戶轉(zhuǎn)發(fā)到例如Paypal并嗅探其用戶名/密碼等。
您可以通過history對象訪問瀏覽歷史記錄，該對象在JavaScript中可以作為全局對象使用(實際上是window.history)。
該history對象包含以下功能-包括歷史記錄API：
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
該back()功能將瀏覽歷史記錄移回到上一個URL。調(diào)用back() 具有與用戶單擊瀏覽器的"后退"按鈕相同的效果。
該forward()功能將瀏覽歷史記錄向前移動到歷史記錄的下一頁。調(diào)用forward()與單擊瀏覽器的"轉(zhuǎn)發(fā)"按鈕具有相同的效果。僅back()在調(diào)用該函數(shù)或單擊"后退"按鈕時才可能。如果歷史記錄已經(jīng)指向瀏覽歷史記錄中的最新URL，則沒有任何前進的方向。
該go(index)函數(shù)可以根據(jù)您作為參數(shù)傳遞給該go()函數(shù)的索引來向后或向前移動歷史記錄。如果您go()使用負索引進行調(diào)用(例如go(-1))，則瀏覽器將返回歷史記錄。如果您向go() 函數(shù)傳遞一個正索引，那么瀏覽器將在瀏覽歷史記錄中向前移動(例如go(1))。索引指示歷史記錄中要在瀏覽歷史記錄中前進或后退的步驟，例如1,2，-1，-2等。
該pushState(stateObject, title, url)函數(shù)將新的URL推送到歷史記錄堆棧。該函數(shù)具有三個參數(shù)。該url是推到歷史堆棧的URL。該title 參數(shù)通常被瀏覽器忽略。的stateObject是，當一個新的URL被壓入歷史堆棧，將隨著事件傳遞的對象解雇。它stateObject可以包含您想要的任何數(shù)據(jù)。它只是一個JavaScript對象。
該replaceState(stateObject, title, url)函數(shù)的功能類似于該pushState()函數(shù)，只是它將歷史記錄堆棧中的當前元素替換為新的URL。當前元素不一定是最重要的元素。這是目前所指向的元件，其可以是在堆棧中的任何元件，如果 back()，forward()和go()功能已經(jīng)被稱為上history 對象。
現(xiàn)在該來看一些有關如何使用HTML5歷史記錄API的示例。
首先讓我們看看如何使用back()和 forward()函數(shù)在歷史記錄中來回移動：
history.back(); history.forward();
請記住，history對象位于window對象中，因此您還可以編寫：
window.history.back(); window.history.forward();
但是，由于該window對象是默認對象，因此可以將其省略。window在本教程的其余部分中，我將忽略該 對象。
請記住，除非您(或用戶)首先移回歷史記錄，否則您無法移入歷史記錄。
現(xiàn)在讓我們看看如何使用該go()函數(shù)執(zhí)行類似于back()和 forward()函數(shù)的動作。首先，這是您用來go()向后瀏覽歷史記錄的上一步：
history.go(-1);
要向后移動兩步，您可以將-2參數(shù)作為參數(shù)傳遞給go()函數(shù)，如下所示：
history.go(-2);
同樣，要使歷史向前發(fā)展，您可以向go()函數(shù)傳遞正索引。這是兩個在歷史上向前推進了一步和兩個步驟的示例：
history.go(1); history.go(2);
當然，如果您同時執(zhí)行了這兩行，則瀏覽歷史記錄將總共向前移動3個步驟。
要將狀態(tài)推入歷史記錄堆棧，請調(diào)用 對象的pushState()函數(shù)history。這是一個pushState()示例：
var state = {};
var title = "";
var url = "next-page.html";
history.pushState(state, title, url);本示例將新URL推送到歷史記錄堆棧中。這還將更改瀏覽器的地址字段中的URL，但不會導致瀏覽器嘗試加載該URL。
該replaceState()函數(shù)替換了當前指向的歷史記錄堆棧中的history元素。如果用戶已使用"后退"按鈕將其移回歷史記錄，則這可能不是最重要的元素。這是一個replaceState()示例：
var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);替換狀態(tài)也將更改瀏覽器的地址字段中的URL，但不會使瀏覽器加載該URL。替換URL的頁面仍保留在瀏覽器中。
HTML5歷史記錄API使網(wǎng)頁能夠偵聽瀏覽器歷史記錄中的更改。安全限制也適用于此，因此不會向網(wǎng)頁通知導致URL超出網(wǎng)頁域之外的歷史記錄更改。
要偵聽瀏覽器歷史記錄中的更改，請onpopstate在window 對象上設置偵聽器。這是瀏覽器歷史記錄事件偵聽器示例：
window.onpopstate = function(event){
console.log("歷史記錄更改為：" + document.location.href);
}該onpopstate事件處理函數(shù)將被調(diào)用每次在同一頁內(nèi)的瀏覽器歷史記錄更改(瀏覽器的歷史，頁面推送到歷史堆棧)。對歷史更改事件的反應可能是從URL提取參數(shù)并將相應的內(nèi)容加載到頁面中(例如，通過AJAX)。
注意：只有改變而導致的任何"返回"或"前進"按鈕，或相應的歷史導航功能 back()，forward()并且go()將導致onpopstate事件偵聽器被調(diào)用。調(diào)用pushState()和replaceState()函數(shù)將不會觸發(fā)歷史記錄更改事件。
當將新的URL推入歷史記錄堆棧時，瀏覽器的地址字段中的URL將更改為新的URL。但是，瀏覽器不會嘗試加載該URL。僅顯示URL并將其推入堆棧，就像瀏覽器已訪問該頁面一樣，但是推送新狀態(tài)的頁面仍保留在瀏覽器中。
將新URL推送到歷史記錄堆棧是一種使單頁應用程序(SPA)中的特定狀態(tài)可添加書簽的有用方法。例如，在單頁在線商店中，應用程序的URL可能是：
http://myshop.com
該應用程序可能能夠在同一頁面中向用戶顯示產(chǎn)品，但是用戶如何將指向特定產(chǎn)品的鏈接發(fā)送給朋友？
解決方案是，當加載新產(chǎn)品時，單頁面應用將新URL推送到歷史記錄堆棧中。這不會導致新URL的加載，但確實會使新URL在瀏覽器的地址字段中可見。從這里可以將其添加為書簽或復制粘貼到電子郵件等中。以下是這種可添加書簽的URL外觀的示例：
http://myshop.com?productId=234
或者，也許是一個更具可讀性的URL：
http://myshop.com/products/234
或者是一個略多于REST的版本(也提到了產(chǎn)品類型)：
http://myshop.com/products/books/234
在將該URL推送到瀏覽歷史記錄之后，Web商店頁面將通過AJAX加載相應的產(chǎn)品并將其顯示給用戶。
如果用戶單擊"后退"按鈕，onpopstate則將調(diào)用事件處理程序。然后，網(wǎng)頁應查看新的URL是什么，如果URL返回，則加載與該URL對應的產(chǎn)品或應用程序的首頁http://myshop.com。
這是一個HTML5代碼示例，說明了使用AJAX將數(shù)據(jù)加載到瀏覽器中的原理：
<a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("loading data from url: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("history changed to: " + document.location.href);
loadUrl(document.location.href);
}
</script>本示例包含兩個具有JavaScript Click偵聽器的鏈接。單擊鏈接之一后，相應的URL將被推入歷史記錄堆棧，然后加載到瀏覽器中。
該示例還包含一個onpopstate事件偵聽器。當用戶單擊"后退"或"前進"按鈕時，此事件偵聽器將加載瀏覽器地址字段現(xiàn)在顯示的任何URL。
如果用戶單擊鏈接和"后退" /"前進"按鈕，則前面顯示的示例將起作用。但是，如果用戶將URL發(fā)送給朋友或?qū)⑵涮砑訛闀灢⑸院笤L問，該怎么辦？
如果用戶嘗試訪問加標簽的URL，http://myshop.com/books/123則瀏覽器將向Web服務器請求該URL。Web服務器需要知道它必須發(fā)送回與從URL發(fā)送回的相同的單頁應用程序http://myshop.com。您將需要配置Web服務器來執(zhí)行此操作。
同樣，單頁Web應用程序必須查看首次加載時使用的URL，并使用該URL確定要加載和顯示的內(nèi)容。因此，如果單頁應用程序已加載URL，則 myshop.com/books/123該應用程序應加載相應的產(chǎn)品并顯示它。此URL檢查必須在單頁應用程序初始化期間進行。
在撰寫本文時，除Opera Mini外，所有現(xiàn)代瀏覽器(IE，Safari，Chrome，F(xiàn)irefox)都支持HTML5歷史記錄API。