当前位置:秋叶网络博客 前端设计 ◊ 同域名下浏览器不同标签页利用本地存储进行通信

同域名下浏览器不同标签页利用本地存储进行通信

作者:秋叶 发表时间:2017年3月05日

解释标题的时间又到了~。

什么是“同域名下不同标签页的通信”?简单来说就是不允许【两个同一网站的页面】在【同一用户】浏览器中【同时】做相同的事情,比如页面a和页面b,两个页面都在浏览器中打开了,a在做某个事情之前怎么知道b也在做相同的事情,从而终止做这个事情的想法呢?即任务单一性。

通俗易懂的例子就是某个网站在公用页脚引入了audio标签,打开这个网站所有页面都会播放音乐,同时打开多个在浏览器中,声音将会错综杂乱,如何解决这个问题呢?

解决办法是音乐默认不播放,而是通过程序让其播放,程序让其播放之前先判断这个音乐是不是在其它标签页播放,若果有播放就不播放,反之。现在逻辑在于怎么判断,很简单,localStorage或者cookies,在这里我用localStorage,就是在播放音乐之后存个状态在本地,播放音乐之前先判断本地存储,本地存储是共用同一个域名下的,如果有就不播放,反之。

这里又有一个问题。如果关掉页面再打开一个页面,存储还在,所以音乐就不播放了,这是个bug,得解决。所以在关掉页面之前的瞬间要把localStorage清掉。但又有一个问题,如果打开多个标签页呢,其中有一个在播放音乐,其他不在播放音乐,任意关掉其中一个不播放的页面,再打开一个新的页面,新的页面也播放音乐了。所以这里还要做个逻辑处理,就是关页面之前采用sessionStorage或者判断音乐状态来选择是否删掉localStorage,当然sessionStorage要在播放音乐的时候存个状态,在这里我用判断音乐状态来处理。

所以最终参考代码如下:

window.onload=function(){
    var audio = document.getElementById('audio');
    var playing=localStorage.playingSrc;
    if(!playing || playing!=audio.src){
        localStorage.playingSrc=audio.src;
        audio.play();
    }
}
window.onunload=function(){
    if(audio.played.length){
        localStorage.playingSrc=null;
    }
}

这就完美解决了浏览器的不同标签页之间的通信问题了。代码小巧玲珑,当然没有做兼容性,默认认为最新浏览器,你要做兼容的话可以采用cookies代替localStorage。

目录: 前端设计 | 标签: | 5723次阅读