使用localStorage实现浏览器页面之间的通信（更新别的页面）

需求场景

我们打开了两个需要登录的页面。我们在其中一个页面登录成功了，现在是想能够把已登陆的状态通知另外一个页面，让它自动更新。

实现方案

我们可以使用html5的localStorage来实现同一个浏览器页面之间的通信。

信息广播：

function messageBroadcast(message)
{
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}

信息接收：

function messageReceive(ev)
{
    if (ev.originalEvent.key!='message') return; // 限定接收信息的键，这里为message
    var message=JSON.parse(ev.originalEvent.newValue);
    //信息处理
    if (!message) return; // 忽略空信息
}

信息监听：

$(window).on('storage', messageReceive);

在window添加对storage事件的监听，当localStorage调用setItem时，它会接收到存储值的变更，并调用messageReceive函数处理。

提示

localStorage只限定在相同域名下，处于安全考虑，不同域名（包括子域名）之间的localStorage是不能互相访问。如果要处理跨域的页面，可以考虑使用postMessage API。

Chrome和Firefox浏览器现支持Broadcast Channel API，它是用于做页面之间通信的新的API。可以参考BroadcastChannel的用法。