井井客

搜索

多个标签页之间通信(cookie、localStorage)

分别使用cookie、localStorage实现标签页之间通信(最好启动一个http服务再访问页面)。

cookie + setInterval

通过每隔一段时间查询 cookie 值的变化实现。发生变化时,每个标签页都会执行动作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="btn">点击触发事件</button>
    <script>
        // 触发事件
        document.getElementById("btn").onclick = function () {
            document.cookie = "setTime=" + new Date().getTime();
        }
    </script>
    <script>
        // (根据键)获取cookie值
        function getCookie(key) {
            if (document.cookie) {
                return JSON.parse("{"" + document.cookie.replace(/;s+/gim, "","").replace(/=/gim, "":"") + ""}")[key];
            } else {
                return "";
            }
        }
        // 定时器访问cookie
        var tempTime = getCookie("setTime"),
            nowtime;
        setInterval(function () {
            nowtime = getCookie("setTime");
            if (tempTime !== nowtime) {
                console.log("值有变动,setTime=" + nowtime);
                tempTime = nowtime;
            }
        }, 1000);
    </script>
</body>
</html>

storage 事件监听

通过设置 localStorage ,并监听 window.storage 事件实现。发生变化时,本标签页不会执行动作,其它标签页才会执行动作(所以一个浏览器中需要打开两个标签页用于访问这个页面)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button id="btn">点击触发事件</button>
    <script>
        // 触发事件
        document.getElementById("btn").onclick = function () {
            localStorage.setTime = new Date().getTime();
        }
    </script>
    <script>
        // 监听storage事件
        window.addEventListener("storage", function (event) {
            console.log("在另一个标签修改了storage ---- " + localStorage.setTime);
        }, false);
    </script>
</body>
</html>

整理的代码就是这样子,可以复制代码到html文件中(不要直接打开html文件查看),要用http访问。另外强调:localStorage 方式需要至少两个标签页才能看到效果。目前试了下,好像还不能跨浏览器...

另外兼容啥的没怎么考虑,只是意思一下~

文章TAG:JS

作者:井井客整理来源:原创
本文标题:多个标签页之间通信(cookie、localStorage)
本文链接:/c/27340.html

上一篇:http代理与抓包工具-Charles
下一篇:一个简单的WebSocket连接

文章分类

相关阅读

随便看看