浏览器多个标签之间通讯

Posted on

第一种:

在一个标签中使用localStorage.setItem(key,value)//添加内容
在另一个标签里监听storage事件
及可得到 localStorge存储的值，实现不同标签只见那的通讯

标签一:

1
2
3
4
5
6
7
8
9
10
<input id="name">
<input type="button" id="btn" value="提交">
<srcipt>
    $(function () {
        $('#btn').click(function() {
            var name = $('#name').val();
            locastorage.setItem('name': name);
        })
    })
</script>

标签二:

1
2
3
4
5
6
7
<script>
    $(function() {
        window.addEventListener('storage', function(e) {
             console.log(e.key  + e.newVlaue);
        });
    })
</script>

第二种:

页面一:

1
2
3
4
5
6
7
8
9
10
11
<input id="name">
<input id="btn" type="button" value="提交">
<script>
    $(function() {
        $('#btn').click(function() {
            var name = $('#name').val();
            document.cookie = 'name'+name;
        });

    })
</script>

页面二:

1
2
3
4
5
6
7
8
9
10
11
<script>
    $(function() {
        function getCookie(key) {
            return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]
        }
        setInterval(function() {
            console.log('name='+getCookie('name'));
        }, 1000)
    })

</script>
0%