使用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的用法

版权声明:著作权归作者所有。

相关推荐

Vuejs兄弟组件之间的通信通信

vuejs兄弟组件之间的通信可以使用事件发射器。最简洁的方式使用Vue的root实例来作为全局的事件仓库。示例ComponentAthis.$root.$emit('myevent', data); ComponentBmounted() {     this.$root.$on('myevent', data =&g

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

Angular CLI:集成Autoprefixer兼容多浏览器以及浏览器版本

Angular CLI使用Autoprefixer来兼容不同的浏览器以及多个浏览器版本,我们不需要做额外的工作来集成Autoprefixer。Autoprefixer内部依赖于Browserslist,根据Browserslist的配置决定兼容哪些浏览器或浏览器版本。如果我们对浏览器的兼容范围有自己的需求,可以设置Browserslist的配置。集成Browserslist配置到Angu

JavaScript检测浏览器支持的视频格式以及音频格式

不同的浏览器支持的视频/音频格式有所不同,为了在多个浏览器上兼容视频/音频的播放,需要使用JavaScript检测浏览器所支持的视频/音频格式。HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement,HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。语法str = aud

页面调试禁用Chrome浏览器的缓存

在前端开发过程中,页面调试时常常需要清理浏览器的缓存,下面介绍两种禁用Chrome缓存的方法。方法一:1、F12打开开发这工具2、选中开发者工具的Network标签3、把Disable cache勾选上,如图注意:禁用Chrome的缓存只有在开发者工具打开时才起作用。方法二安装清理缓存的Chrome插件。可以试一下Cache Killer。