這篇文章主要介紹了瀏覽器中url存儲的JavaScript實現,并且簡單講述了輸入url地址后提示過去輸入歷史記錄的原理,需要的朋友可以參考下

現在的瀏覽器里,有一個十分有趣的功能，你可以在不刷新頁面的情況下修改瀏覽器URL;在瀏覽過程中.你可以將瀏覽歷史儲存起來，當你在瀏覽器點擊后退按鈕的時候，你可以沖瀏覽歷史上獲得回退的信息，這聽起來并不復雜，是可以實現的，我們來編寫些代碼。來看看它是如何工作的。

1. var stateObject = {}; 
2. var title = "Wow Title"; 
3. var newUrl = "/my/awesome/url"; 
4. history.pushState(stateObject,title,newUrl); 

History 對象 pushState() 這個方法有3個參數,你可以從上面的例子看到。第一個參數，是一個Json對象 , 在你儲存有關當前URl的任意歷史信息.第二個參數,title 就相當于傳遞一個文檔的標題 ，第三個參數是用來傳遞新的URL. 你將看到瀏覽器的地址欄發生變化而當前頁面并沒刷新。

讓我們看一個例子，在這個例子中我們將在每個獨立的URL中存儲一些任意數據。

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

現在運行，點擊瀏覽器的返回按鈕，查看URL是怎么改變的。對于每次URL的改變，是因為它存儲了歷史狀態“id”以及對應的值。但是我們怎么重新獲得歷史狀態，并且在此基礎上做些事情呢?我們需要對“popstate”添加事件監聽器，這將會在每次歷史對象的狀態改變的時候觸發。

1. for(i=0;i<5;i++){ 
2. var stateObject = {id: i}; 
3. var title = "Wow Title "+i; 
4. var newUrl = "/my/awesome/url/"+i; 
5. history.pushState(stateObject,title,newUrl); 
6. alert(i); 
7. } 
8.  
9. window.addEventListener('popstate', function(event) { 
10. readState(event.state); 
11. }); 
12.  
13. function readState(data){ 
14. alert(data.id); 
15. } 

現在你會看到無論什么時候你點擊返回按鈕，一個“popstate”事件就會被觸發。我們的事件偵聽器然后檢索歷史狀態對象與之關聯的URL,并提示“id”的值。

它是非常的簡單和有趣，不是嗎?