您现在的位置:首页 >> 前端 >> 内容

如何实现浏览器内多个标签页之间的通信

时间:2016/12/30 9:32:20 点击:

  核心提示:浏览器内多个标签页之间的通信'>如何实现浏览器内多个标签页之间的通信调用localStorage,cookies等本地存储的方式方法一:使用localStorage使用localStorage.set...

调用localStorage,cookies等本地存储的方式

方法一:使用localStorage

使用localStorage.setItem(key,value);添加调用的内容
使用storage事件监听添加/删除/修改的动作

window.addEventListener("storage",function(event){
    $("#name").val(event.key +"="+ event.newValue);
    })

方法二:使用cookie+setInterval

<input type="text" id="name">
<input type="button" id="btn" value="发送">
$(function(){
    $("#btn").click(function(){
        var name = $("#name").val;
        documents.cookie = "name = "+name;
        })
    });
    //获取cookie中的内容
    function getKey(key){
        return JSON.parse("{\""+ documents.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key]
    }
    //每隔1秒获取cookie的内容
    setInterval(function(){
        console.log(getKey("name"));
        },1000);

作者:网络 来源:welcomegq的