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

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

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

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

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

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

所以最终参考代码如下：

window.οnlοad=function(){

var audio = document.getElementById('audio');

var playing=localStorage.playingSrc;

if(!playing || playing!=audio.src){

localStorage.playingSrc=audio.src;

audio.play();

}

}

window.οnunlοad=function(){

if(audio.played.length){

localStorage.playingSrc=null;

}

}

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