web标签页之间的通信

标签页之间的通信，遵循同源策略。

1.localStroage

  当对localStroage进行添加、删除、更改操作时，会触发stroage事件。所以通过监听stroage事件，获取到localStroage的信息。

test.html

<input id="name" type="text">

<input type="button" id="btn" value="提交"> <script> var btn=document.getElementById('btn'); btn.onclick=function () { var name=document.getElementById('name').value; localStorage.setItem("name",name); console.log(localStorage.getItem("name")); } </script>

test2.html

<script>
		window.addEventListener("storage",function(event){
		          console.log("value is "+event.newValue);
		          console.log("key is "+event.key);
		},false);  

		
</script>

在test.html中输入值，点击按钮，可以在test.html中取得信息

方法二：使用cookie+setInterval（）

注意：因为document.cookie并不友好，所以，自己封装了获取和设置cookie的函数。CookieUtil是封装的对象。

test.html

<input id="name" type="text">  
<input type="button" id="btn" value="提交"> 

<script>
	
		window.onload=function(){
		           var oBtn=document.getElementById("btn");
		           var oInput=document.getElementsByTagName("input")[0];
		           oBtn.onclick=function(){
		               var val=oInput.value;
		              CookieUtil.set("name",val);
		              console.log(CookieUtil.get("name"));
		           } 
		          
		}
</script>

test2.html

<script>
		
	   window.onload=function () {
	            setInterval(function(){    
                            console.log("name=" + CookieUtil.get("name"));    
                    }, 100);    
		}
</script>

当在test.html输入值并点击按钮后，可以在test2.html中得到信息