本地页面之间共享消息或变量（localStorage）

最新推荐文章于 2024-08-15 20:33:20 发布

往前的

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量3.8k

点赞数

分类专栏： javaScript jquery 文章标签： iframe localStorage 页面之间传值跨域 js跨域

本文链接：https://blog.csdn.net/m0_37355951/article/details/78021651

版权

javaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

概述：

由于为了管理，分类，我们不会虽然呈现成一个页面，实际上是多个页面组成，最普通标签内嵌标签<iframe>，但是问题来了，如果我点击A页面某个内容，B页面怎么知道点击这个页面而自动更新，前面记得有一篇通过Cookie进行实现，用户可能会禁用cookie，这样cookie方法有局限性，刚才在其他地方找到一个另外的方法来实现页面之间共享变量，如果两个同域（相同的协议、主机名、端口）的网页进行通讯，可以使用localStorage,如果是不同主机名和端口可以使用postMessage:参考-http://www.cnblogs.com/dolphinX/p/3464056.html，这里学习一下简单localStorage用法

点击按钮随机变化背景颜色

1、首先看第一个a.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>页面之间传递消息</title>

</head>
<body>
	<input type="button" value="变色" id="btn">
	<iframe id="iframe" src="./b.html" frameborder="0"
								width="100%" height="600px"> </iframe>
	<!-- 引入jquery.js -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

	<script type="text/javascript">
		$("#btn").click(function(){
			var r = Math.ceil(Math.random()*255);
			var g = Math.ceil(Math.random()*255);
			var b = Math.ceil(Math.random()*255);
			localStorage.setItem("rgb",r+","+g+","+b);
			
		});
	</script>
</body>
</html>

总结：

1、主要标签只要一个按钮和一个<iframe>标签（也就是内嵌b.html页面）
2、为按钮绑定点击事件，随机生成rgb三个值，然后以逗号隔开拼成一个字符串
3、设置localStorage.setItem("键","值") 【localStorage就是全网页的全局变量】

2、再看看内嵌网页b.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>页面之间传递消息</title>

</head>
<body>
	<div id="rect" style="width:400px;height:500px"></div>
	<!-- 引入jquery.js -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

	<script type="text/javascript">
	 window.addEventListener("storage",function(e){
	    if(e.key=="rgb"){
	        var rgb=localStorage.getItem("rgb")
	     	var rgbArr=rgb.split(",");
	        var r = parseInt(rgbArr[0]);
	        var g = parseInt(rgbArr[1]);
	        var b = parseInt(rgbArr[2]);
	        var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
	        $("#rect").css("background-color",hex);
	    }
	});
	</script>
</body>
</html>

总结：

1、窗口监听事件"storage", 判断值是否改变（这就需要注意，它触发的条件值改变，如果值不改变将会不会触发事件，可以加上随机数或时间戳）
2、localStorage.getItem("rgb")获取a.html页面设置的值
3、var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); 将rgb转换成16进制字符串
4、$("#rect").css("background-color",hex); 设置css样式背景颜色

效果：（不断点击改变颜色）