如何实现不同标签页之间的通信

发表于 | 分类于

1 通过cookie进行通信

cookie简单理解就是一种可以让服务器在客户端的硬盘或者内存里面存储少量数据,或者说从客户端硬盘读取数据的技术.

1.1 cookie可以是同域之间的不同标签页进行通信

假设在域名www.myvirtual1.com有以下文件

01 cookies.html

1
2
3
4
5
6
7
<script>
    document.cookie = "name1=Jhon";
    var d = new Date();
    d.setDate(d.getDate()+5);
    var expires = d.toUTCString();
    document.cookie = "name2=Jim;expires="+expires;
</script>

02 cookies.html

1
2
3
4
<script>
    console.log(document.cookie);
  //02cookies.html:9 name1=Jhon; name2=Jim; _ga=GA1.1.648196503.1489976857
</script>

1.2 不同域之间的标签页如何通过cookies进行通信呢？由于同源策略的影响，这个时候需要跨域来实现，这个时候需要设置cookie的domain属性

2 通过localStorage进行通信

假设在域名www.myvirtual1.com有以下文件

01localStorage.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="set localStorage" id="btn"/>
<script>
    function sendMsg(text) {
        window.localStorage.setItem('msg',text);
    }
    document.getElementById("btn").onclick = function(){
        sendMsg ('message1');
    };
</script>
</body>
</html>

02localStorage.html

1
2
3
4
5
6
7
<script>
//localstorage的增删改查的监听事件事件会监听
    window.addEventListener('storage', function (evt) {
        if(evt.key==='msg')
            console.log(evt.newValue);
    });
</script>

storageEvent事件对象参数有以下常用属性

1
2
3
key  属性用来表示storage存储的键值对属性的键
oldValue 属性用来表示storage存储的原来的属性值
newValue 属性用来表示storage存储的原来的属性值