学习笔记-浏览器内多个标签页之间的通讯

本题主要考察多页应用中各个页签之间数据交互的技术手段。

实现多页通讯主要有利用

• 浏览器数据存储方式：浏览器数据存储的方式主要用本地存储方式解决，即调用localStorage、Cookie等本地存储方式。

• 服务器方式：主要使用websocket技术使多页签都监听服务器推送事件来获得其他页签发送的数据。

浏览器存储：

第一种：localStorage：

在一个标签页里面使用localStorage.setItem(key,value)添加(修改、删除)内容;在另一个标签页里面监听storage事件。即可得到localstorge存储的值，实现不同标签页之间的通信。

// 添加
localStorage.setItem(key,value) 
// 删除
localStorage.removeItem(key,value) 

// 添加监听 storage 的变化
window.onload = function () {
    window.addEventListener('storage', function (event) {
      // event 事件对象包含 domain newValue oldValue key
        console.log(event.key + '=' + event.newValue);
    })
}

第二种：cookie+setInterval：

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息， 即可随时获取要