关于html页面之间传值的几种方式

关于html页面之间传值的几种方式

1、通过cookie，传递

cookie能够存储少量数据到客户端的磁盘中，特定的网页之间是可以共享cookie中的数据。

a.html

注意：需要运行在服务器上访问页面 还需要引入jquery 和cookie的js文件；

<script type="text/javascript" src="./js/jquery.min.js"></script> 
<script type="text/javascript" src="./js/jquery.cookie.js"></script> 
<script> 
　　$.cookie("a","12"); 
</script>

b.html

<script type="text/javascript" src="./js/jquery.min.js"></script> 
<script type="text/javascript" src="./js/jquery.cookie.js"></script> 
<script> 
　　var param = $.cookie("a"); 
　　console.log(param); 
</script>

2 、 window.open和window.opener之间传值

window.open可以打开一个新的页面，在新的页面中可以通过window.opener获取父页面的窗口对象，从而可以获取父窗口中的参数。

a.html

<button id="open">打开新的页面</button> 
<script> 
　　$('#open').click(function () { 
　　　　window.open('./b.html') 
　　}) 
</script>

b.html

<script>

 　　var content = window.opener.document.getElementById("open").innerHTML;  

　　alert(content);  

</script>  

3 、h5技术，window.localStorage存储数据

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。此方法类似cookie，将数据存在一个公共的地方，实现页面之间传值。

a.html

<input type="text" name="username" /> 
<input type="button" name="" value="post" "set()"/> 
<script> 
　　function set() { 
　　　　//由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持 
　　　　if (window.localStorage) { 
　　　　//存储变量的值 
　　　　　　localStorage.name = document.all.username.value; 
　　　　　　location.href = './b.html'; 
　　　　} else { 
　　　　　　alert("NOT SUPPORT"); 
　　　　} 
　　} 
</script>

b.html

<script> 
　　var value = localStorage["name"]; 
　　alert(value); 
</script>

4 、通过form表单传递参数

a.html
第一个页面通过value传递参数

<form name="frm" method="get" action="two.html" "">
   		<input name="id" value="gnail" index="xigua">
   		<input type="submit"/>
   </form>
   

b.html

<script type="text/javascript">
		var str=window.location.href;
		//打印当前url
		console.log(str);
		//对当前字符串进行字符串分隔成字符串数组
		var arrStr = window.location.href.split("=");
		console.log(arrStr);
		var gn= window.location.href.split("=")[1];
		console.log(gn);
	</script>

第一个页面在页面跳转的过程中,把参数传递到window.location.href,然后在第二个页面里打开浏览器控制台查看window.location.href,可以看到传递过来的数据:

总结

对于不同的解决方法，都有优缺点

1、url携带参数

优点：取值方便，可以跨域，利于页面分享，没有环境限制。

缺点：url携带参数值的长度有限制。

2、cookie方式

优点：可以在同源内的的任意网页中访问，存储数据的周期可以自由设置。

缺点：有长度限制。

3、设置窗口之间的父子关联关系

优点：取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制。
缺点:两窗口要存在着关系.就是利用window.open打开的窗口。不能跨域。

4、h5技术，window.localStorage存储数据

优点：储存空间大，有5M存储空间。

缺点：不是所有浏览器都支持。

转自：https://blog.csdn.net/DENG8623048/article/details/84894780