1. 程式人生 > >如何實現瀏覽器內多個標簽頁之間的通信?

如何實現瀏覽器內多個標簽頁之間的通信?

keyword eve ttr type UNC storage事件 rep ring mage

方法一:使用localStorage

使用localStorage.setItem(key,value);添加內容

使用storage事件監聽添加、修改、刪除的動作

html代碼

技術分享圖片

JS代碼-頁面1

<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>

JS代碼-頁面2

<script type="text/javascript">
$(function(){
window.addEventListener("storage", function(event){
alert(event.key + "=" + event.newValue);
});
});
</script>

方法二、使用cookie+setInterval

HTML代碼

  1. <inputidinputid="name"><input type="button" id="btnOK"value="發送">

JS代碼-頁面1

  1. $(function(){
  2. $("#btnOK").click(function(){
  3. varname=$("#name").val();
  4. document.cookie="name="+name;
  5. });
  6. });

JS代碼-頁面2

  1. //獲取Cookie天的內容
  2. function getKey(key) {
  3. return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
  4. }
  5. //每隔1秒獲取Cookie的內容
  6. setInterval(function(){
  7. console.log(getKey("name"));
  8. },1000);

如何實現瀏覽器內多個標簽頁之間的通信?