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

最新推荐文章于 2022-04-21 08:45:56 发布

青木瓜的绿

最新推荐文章于 2022-04-21 08:45:56 发布

阅读量146

点赞数

分类专栏： Html5 JS

Html5 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

解题方法

方法一：使用localStorage

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

使用storage事件监听添加、修改、删除的动作

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

方法二、使用cookie+setInterval

HTML代码

<inputid="name"><input type="button" id="btnOK"value="发送">

JS代码-页面1

$(function(){
    $("#btnOK").click(function(){
        varname=$("#name").val();
        document.cookie="name="+name;
    });
});

JS代码-页面2

//获取Cookie天的内容
function getKey(key) {
    return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
}
//每隔1秒获取Cookie的内容
setInterval(function(){
    console.log(getKey("name"));
},1000);

---------------------
原文：https://blog.csdn.net/lxcao/article/details/52777066