js中的历史状态管理方法总结

最新推荐文章于 2024-08-02 20:30:00 发布

冰雪为融

最新推荐文章于 2024-08-02 20:30:00 发布

阅读量838

点赞数

分类专栏： js学习笔记整理文章标签： js 历史状态管理

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79677853

版权

js学习笔记整理专栏收录该内容

56 篇文章 7 订阅

订阅专栏

通过观看妙味视频以及看js高级程序设计对历史状态管理做一个小小的总结，方便以后查阅

我们知道浏览器上面有个“前进”和“后退”按钮，如果我们不做过多的设置，它们只有当我们打开了一个新页面的时候才会起作用，而在现代web应用中，用户每次操作不一定会打开一个全新的页面，因此“后退”和“前进”按钮也就失去了作用，导致用户很难在不同状态间切换。

要解决这个问题，有两种方法

1、hashchange事件（当url参数列表及URL中#后面的所有字符串发生变化时触发该事件）：改变hash值来管理

看个例子（随机选彩票）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
	var oInput = document.getElementById('input1');
	var oDiv = document.getElementById('div1');
	
	var json = {};
	
	oInput.onclick = function(){
		
		var num = Math.random();//随机产生0-1的数字
		
		var arr = randomNum(35,7);//随机生成7个1-35之间的数字
		 
		json[num] = arr;将数组存入json中
		
		oDiv.innerHTML = arr;//将数组中的值添加到页面中
		
		window.location.hash = num;//每次单击按钮时改变URL中#后面的数字
		
	};
	
	window.onhashchange = function(){//当URL中#后面的字符串改变时触发该事件
		
		oDiv.innerHTML = json[window.location.hash.substring(1)];
		
	};
	
	function randomNum(iAll,iNow){
		
		var arr = [];
		var newArr = [];
		for(var i=1;i<=iAll;i++){//生成从1-iAll的数字，并将其放入arr数组中
			arr.push(i);
		}
		
		for(var i=0;i<iNow;i++){//从arr数组中随机选出iNow个数字并存入新的数组newArr中
			newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
		}
		
		return newArr;//将这个新数组返回
		
	}
	
};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>

2、history.pushState()方法：通过状态管理API，能够在不加载新页面的情况下改变浏览器的URL

注意：使用该方法：必须要在服务器下运行

pushState()，该方法可以接收三个参数：状态对象、新状态的标题、可选的相对URL

执行pushState()方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对URL。但是浏览器并不会真的向服务器发送请求，即使状态改变后查询location.href也会返回一个与地址栏相同的地址。注意：第二个参数目前没有浏览器实现，因此完全可以只传入一个空字符串，或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为pushState()会创建新的历史状态，所以你会发现“后退”按钮也能使用了》按下“后退”按钮，会触发window对象的popstate事件。而popstate事件的事件对象有一个state属性，这个属性就包含着当初以第一个参数传递给pushState()状态的对象

注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面

下面看用pushState()方法实现随机选彩票功能

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>随机选彩票</title>
<script>
window.onload = function(){
	var oInput = document.getElementById('input1');
	var oDiv = document.getElementById('div1');
	
	oInput.onclick = function(){
		
		var arr = randomNum(35,7);
		
		history.pushState(arr,'',arr);
		
		oDiv.innerHTML = arr;
		
	};
	
	window.onpopstate = function(ev){//state是event对象下的属性
		var ev = ev||event;
		oDiv.innerHTML = ev.state;
		
	};
		
	function randomNum(iAll,iNow){		
		var arr = [];
		var newArr = [];
		for(var i=1;i<=iAll;i++){
			arr.push(i);
		}
		
		for(var i=0;i<iNow;i++){
			newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
		}
		
		return newArr;
		
	}
	
};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>