html5历史管理

　　在网易云课堂上看了妙味课堂的关于html5历史管理的课程，在这里做一下笔记。

　　单页面或ajax局部刷新的页面中，没有办法通过前一步和后一步得到历史访问数据，此时有两种方法可以解决这个问题：

　　1.onhashchange事件，示例代码：

<body>
	<input type="button" value="35选7" id="input1">
	<div id="div1"></div>

	<script type="text/javascript">
		var oInput=document.getElementById("input1");
		var oDiv=document.getElementById("div1");
		var obj={};

		oInput.onclick=function(){
			var number=randomNumber(35,7);
			oDiv.innerHTML=number;
			var oRd=Math.random();
			obj[oRd]=number;
			window.location.hash=oRd;
		}

		window.onhashchange=function(){
			var number=obj[window.location.hash.substr(1)]||'';
			oDiv.innerHTML=number;
		}

		function randomNumber(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;
		}

	</script>
</body>
</html>

　　

　　2.history下的pushstate和popstate事件，示例代码：　　

<body>
	<input type="button" value="35选7" id="input1">
	<div id="div1"></div>

	<script type="text/javascript">
		var oInput=document.getElementById("input1");
		var oDiv=document.getElementById("div1");

		oInput.onclick=function(){
			var number=randomNumber(35,7);
			oDiv.innerHTML=number;
			history.pushState(number,'');
		}

		window.onpopstate=function(ev){
			console.log(1);
			var number=ev.state||'';
			oDiv.innerHTML=number;
		}

		function randomNumber(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;
		}

	</script>
</body>
</html>

　　几点说明：

　　1.hash就是url中#和它后面的内容

　　2.必须把hashchange事件处理程序添加给window对象，然后url参数列表只要变化就会调用它。

　　3.pushstate方法接收三个参数：数据，标题(都没实现，实际开发中一般为‘’)，地址(可选)

　　4.popstate事件读取数据用event.state

posted @ 2017-02-08 16:16  陆漫漫  阅读(833)  评论(0)    收藏  举报