快捷導(dǎo)航

瀏覽器中url存儲的JavaScript實(shí)現(xiàn)

更新時(shí)間：2015年07月07日 09:14:56 投稿：goldensun

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

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

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

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

讓我們看一個(gè)例子，在這個(gè)例子中我們將在每個(gè)獨(dú)立的URL中存儲一些任意數(shù)據(jù)。

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);
}

現(xiàn)在運(yùn)行，點(diǎn)擊瀏覽器的返回按鈕，查看URL是怎么改變的。對于每次URL的改變，是因?yàn)樗鎯α藲v史狀態(tài)“id”以及對應(yīng)的值。但是我們怎么重新獲得歷史狀態(tài)，并且在此基礎(chǔ)上做些事情呢？我們需要對“popstate”添加事件監(jiān)聽器，這將會(huì)在每次歷史對象的狀態(tài)改變的時(shí)候觸發(fā)。

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);
}

現(xiàn)在你會(huì)看到無論什么時(shí)候你點(diǎn)擊返回按鈕，一個(gè)“popstate”事件就會(huì)被觸發(fā)。我們的事件偵聽器然后檢索歷史狀態(tài)對象與之關(guān)聯(lián)的URL,并提示“id”的值。

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

您可能感興趣的文章: