HTML5 actual combat and analysis of history management (history object)

HTML5 has newly added the management of history, and updated the history object to make it more convenient to manage historical status. In modern web applications, users can switch history pages through the "forward" and "back" buttons. This allows some new pages that are not opened in new pages to move forward and back freely, improving user experience.

Through the haschange event, you can know when the parameters of the URL have changed, that is, when you should react. Through the state management API, the browser URL can be changed without loading a new page. So you need to use the history.pushState() method. The history.pushState() method receives three parameters: 1. Content to be stored 2. Title (usually an empty string) 3. Address (optional). A small example is as follows

　JavaScript code##

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

JavaScript code##

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

To update the current historical state, you can call replaceState(), and the parameters passed in are the same as the first two parameters of the pushState() method. Calling replaceState() will not create a new state in the historical state stack, it will only overwrite the current state. A small example is as follows

JavaScript code

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

Browsers that support HTML5 history state management include Chrome, Safari 5+, Firefox 4+ and Opera 11.5+. In Safari and Chrome, the state object passed to pushState() or replaceState() cannot contain DOM elements. Firefox supports including DOM elements in state objects. Opera also supports a history.state property, which returns a state object for the current state. The following is time for small examples. Only by combining small examples can we better understand the history management in HTML5.

Add href value to achieve history management　

HTML code

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

JavaScript code

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

Passed History object in HTML5 implements history management##　

HTML code

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

JavaScript code

//pushState : 三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)

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

window.onload = function(){
	var oInput = document.getElementById('input1');
	var op = document.getElementById('p1');
	
	var iNow = 0;
	
	oInput.onclick = function(){
	
		var number = randomNum(35,7);
		
		op.innerHTML = number;

		history.pushState(number,'',iNow++);
	
	};
	
	
	window.onpopstate = function(ev){  //历史管理改变，就会触发
		
		var number = ev.state || '';

		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
Copy after login