DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 浏覽器中url存儲的JavaScript實現
浏覽器中url存儲的JavaScript實現
編輯:JavaScript基礎知識     

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

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

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

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

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

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

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

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved