HTML5實戰與剖析之歷史管理(history物件)

　　HTML5新建了對歷史的管理，更新了history物件讓管理歷史狀態更加方便了。在現代Web應用程式中，使用者可以透過」前進」和」後退”按鈕進行歷史頁面的切換。這讓一些不在新頁面中開啟的新頁面前進後退自如，提高了使用者體驗。

　　透過haschange事件，可以知道URL的參數什麼時候發生了變化，也就是什麼時候該有所反應。透過狀態管理的API，能夠在不載入新頁面的情況下改變瀏覽器的URL。所以需要使用history.pushState()方法。 history.pushState()方法接收三個參數：1.要儲存的內容 2.標題(一般寫個空的字串) 3.位址(可選)。小範例如下

　　JavaScript代碼

history.pushState({name: "menglong"}, '', "li.html");

　　列執行了history.pushState()方法欄後，新的資訊狀態列而被瀏覽到歷史狀態成新的相對URL。但是，瀏覽器並不會想伺服器發送請求，即使歷史狀態改變之後查新location.href也會傳回與網址列相同的位址。另外，第二個參數目前還沒有瀏覽器實現，所以完全可以只傳入一個空字串即可，或者一個短標題也可以。第一個參數則應該盡可能提供初始化頁面狀態所需的各種資訊。

　　因為history.pushState()方法會建立新的歷史狀態，所以會發現」後退」按鈕也可以使用了。按下”後退”按鈕，會觸發window物件的popstate事件。 Popstate事件的事件物件有一個state屬性，這個屬性就包含著當初以第一個參數傳遞給pushState()的狀態物件。小例子如下

　　JavaScript代碼

window.addEventListener('popstate',function(ev){
	var state = event.state;
	if(state){ // 当第一个页面加载的时候state为空
		processState(state)
	}
}, false);

　　行做這些)。記住，瀏覽器載入的第一個頁面沒有狀態，所以」後退”阿牛返回瀏覽器載入的第一個頁面時，event.state值為null。

　　要更新目前歷史狀態，可以呼叫replaceState()，傳入的參數與pushState()方法的前兩個參數相同。呼叫replaceState()不會在歷史狀態堆疊中建立新狀態，只會重寫目前狀態。小例子如下

　　JavaScript代碼

history.replaveState({name: "meng"}, "meng1234");

　　在使用HTML5的歷史狀態管理機制的時候，需要確保使用pushState(的、實際存在的URL與之對應。否則，單機”刷新”按鈕會導致404錯誤。

　　支援HTML5歷史狀態管理的瀏覽器有Chrome、Safari 5+、Firefox 4+和Opera 11.5+。在Safari和Chrome中，傳遞給pushState()或replaceState()的狀態物件中不能包含DOM元素。而Firefox支援在狀態物件中包含DOM元素。 Opera也支援一個history.state屬性，它傳回目前狀態的狀態物件。下面就是小例子時間了，結合小例子才能更好的理解HTML5中的歷史管理。

　　加入href值實現歷史管理

　　㟎＜『程式碼

<input type="button" value="35选7" id="input1" />
<p id="p1"></p>

　　透過HTML5中history物件實現歷史管理 　　

HTML碼

//onhashchange : 事件 : 当hash值改变的时候触发的事件

//hash改变就会出现就会出现历史管理

window.onload = function(){
	var oInput = document.getElementById('input1');
	var op = document.getElementById('p1');
	
	var obj = {};
	
	oInput.onclick = function(){
	
		var number = randomNum(35,7);
		
		op.innerHTML = number;
		
		var oRN = Math.random();
		
		obj[oRN] = number;
		
		window.location.hash = oRN;
	
	};
	
	
	window.onhashchange = function(){
	
		var number = obj[window.location.hash.substring(1)] || '';
		
		op.innerHTML = number;
	
	};
	
	
	function randomNum(alls,now){
	
		var arr = [];
		var newArr = [];
		
		for(var i=1;i<=alls;i++){
			arr.push(i);
		}
		
		
		for(var i=0;i<now;i++){
			newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1 ) );
		}
		
		return newArr;
	
	}
	
};

　　Java25%，對歷史上有更多資訊his相關內容請追蹤PHP中文網（www.php.cn）！