莉丝前端

因为有时候服务器负载，或者其他需求的原因，只可以从一个页面收发消息，这就导致 这个网站的新开页面无法及时得到消息，本文目的就是要实现同电脑同浏览器同域名间数据通讯

机制：H5特性localStorage和visibilitychange

解释：localStorage一直浏览器的寄存器，等同于数据库，有大小限制 3M~5M(够的)，允许同域名下访问；visibilitychange这个其实不好解释，故擅自翻译为，网页可见性检测；

原理：A页面得到数据，将数据存放到localStorage，使用visibilitychange判断当用户切换到B页面后，从localStorage取值；

代码：

A页面储存数据(主要接受页面)

localStorage.setItem('MsgJson',JSON.stringify(obj));

B页面获取数据(被动接受页面)

//初始化激活代码
getlocalStorage();
visibi();
// 判断网页激活前缀
function browerKernel() 
{
    var result;
    [ 'webkit', 'moz', 'o', 'ms' ].forEach(function (prefix) 
    {
        if (typeof document[prefix + 'Hidden'] != 'undefined') {
            result = prefix;
        }
    });
    return result;
}
// 网页激活检测
function visibi() 
{
    prefix = browerKernel();
    document.addEventListener(prefix + 'visibilitychange', function onVisibilityChange(e) 
    {
        var tip = null;
        if (document[prefix + 'VisibilityState'] == 'hidden') {
           
        }
        else if (document[prefix + 'VisibilityState'] == 'visible') {
        getlocalStorage();
        }
    });
    var initstatus = document[prefix + 'VisibilityState'];
}
function getlocalStorage(){
        var msg = localStorage.getItem('MsgJson');
    var obj = JSON.parse(msg);
    /*其他方法*/
    console.log(obj)
}

支持性判断

// 检测是否支持localStorage
if (window.sessionStorage) {
    console.log('可以使用localStorage');
}
else {
    console.log('不可以使用localStorage');
}

缺点：

1、如果A页面在非激活状态下得到数据，且B页面为激活状态，那么无法感知新数据(这就是伪通讯)

2、不宜存放大量数据，毕竟localStorage是有空间限制的