前端--详解浏览器工作原理之多标签页之间的通讯

最新推荐文章于 2024-07-19 18:23:06 发布

张哈哈zhh

最新推荐文章于 2024-07-19 18:23:06 发布

阅读量279

点赞数

文章标签： js cookie

本文链接：https://blog.csdn.net/weixin_44383261/article/details/117329179

版权

实现多页通讯主要有利用浏览器数据存储方式和服务器方式。浏览器数据存储方式主要用本地存储方式解决，也即调用localStorage、cookie等本地存储方式。服务器方式主要使用websocket（全双工通讯）技术使多页标签都监听服务器推送事件来获得其他标签页发送的数据。

浏览器存储

（1）调用localStorage

建立两个html文件，页面1：

    <body>
		<input type="" name="" id="name" value="" />
		<input type="button" name="" id="btn" value="提交" />
		<script type="text/javascript">
			window.onload=function(){
				var btnEle=document.getElementById('btn');
				var nameEle=document.getElementById('name');
				btn.onclick=function(){
					var name=nameEle.value;
					// localStorage
					localStorage.setItem('name',name);
				}
			}
		</script>
	</body>

页面2：

<body>
	<script type="text/javascript">
		window.onload=function(){
			window.addEventListener('storage',function(event){
				console.log((event.key+'='+event.newValue));
			})
		}
	</script>
</body>

在这里插入图片描述
（2）调用cookie+setInterval()

将要传递的信息存储在cookie中，每隔一定时间读取cookie的信息，即可随时获取要传递的信息。
在A页面将需要传递的信息存储在cookie中，在B页面设置setInterval，以一定的时间间隔读取cookie的值。

页面1：

    <body>
		<input type="" name="" id="name" value="" />
		<input type="button" name="" id="btn" value="提交" />
		<script type="text/javascript">
			window.onload=function(){
				var btnEle=document.getElementById('btn');
				var nameEle=document.getElementById('name');
				btn.onclick=function(){
					var name=nameEle.value;
					// cookie
					document.cookie="name="+name;
				}
			}
		</script>
	</body>

页面2：

        <script type="text/javascript">
			window.onload=function(){
				function getCookie(key){
					console.log(document.cookie.replace(/;\s+/gim,"\",\""));
					if(document.cookie){
						return JSON.parse("{\""+document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim,"\":\""))
					}else{
						return ''
					}
				}
				setInterval(function(){
					console.log("name"+getCookie("name"))
				},5000);
			}
		</script>