浏览器内多标签通讯

时间 2019-11-09

原文原文链接

实现浏览器内多标签通讯有多种方法，可使用WebSocket、SharedWorker；也能够调用localstorge、cookies等本地存储方式；这里介绍使用localStorage方法实现。javascript

#####使用 localStorage实现浏览器内多标签通讯 localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，经过在另外一个标签页里监听storage事件，便可获得localstorge存储的值，实现不一样标签页之间的通讯。css

下面的例子是由b页面监听a页面的事件变化并记录html

//a.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器内多页面通讯 </title>

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

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

</head>
<body>
<input id="name">
<input type="button" id="btn" value="提交">


</body>
</html>
复制代码

页面a中只有一个输入框和一个提交按钮，当点击提交后，用localStorage.setItem进行数据存储java

//b.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

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

</head>
<body>
</body>
</html>
复制代码

ｂ页面中使用addEventListener进行事件监听，输出事件信息jquery

#####实现效果：浏览器