当前位置: 首页 > Web前端 > vue.js

使用localStorage实现多页面通讯

时间:2023-04-01 12:58:02 vue.js

需求背景两个页面A,B,当页面B关闭时,通知页面A请求接口刷新列表页面,使用storage事件实现页面通讯,并约定key用于通信。这里我们假设关键是refresh_listA页面监听存储事件mounted(){window.addEventListener('storage',this.otherWindowListener,false);this.$on('hook:beforeDestroy',()=>{window.removeEventListener('storage',this.otherWindowListener);});},方法:{otherWindowListener(event){if(event.key==='refresh_list'){//做某事};},},B页面,保存时设置约定的localStorage键值,关闭页面方法:{close(){localStorage.setItem('refresh_list',newDate().getTime());尝试{window.close();}catch(e){console.log(e);}},},

最新推荐
猜你喜欢