纯前端实现同电脑同浏览器同域名间数据通讯

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

机制: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是有空间限制的

原文链接:,转发请注明来源!
「纯前端实现同电脑同浏览器同域名间数据通讯」评论列表

发表评论