1.同源情况
父页面监听storage 改变
window.addEventListener('storage',(e)=>{
if(e.key==='test') {
// 前提 同源
console.log('我的key被改变了 他点击保存了 我要刷新一下')
}
})
子页面
save(){
localStorage.setItem('test', this.count++);
}
原理:父亲监听storage 孩子改变storage 父亲检测到了就 执行想要的操作
2.不同于源情况
window.addEventListener('visibilitychange',async (e)=>{
console.log('当前我的页面显示状态',!document.hidden)
if(!document.hidden) {
// 这里是代码区域 (方案添加区域)
}
})
方法1:使用window.open() 打开新son页面的窗口
实现:window.open会返回一个对新窗口的引用(新窗口对象-我们有新窗口对象可以做很多事情 这里不展开解释 详情请见 红宝书366页) 只适用于window.open打开的窗口
const son = window.open('.......')
console.log(son.closed)//true or false
返回的son变量 上面携带很多属性 closed属性是用来判断 打开的窗口是否已经关闭
当有多个son的时候我们可以把这个son做成列表
每当父页面想要判断 子页面是否改变额的时候去 判断son列表 谁原来状态是true 现在是false了
如果谁是就去请求对应的页面 更新数据
方法2: 可与后端 约定一个key (如果另一个页面点点就了保存key就改变) 前后判断是否一致 如果不一致就请求数据 更新页面 一致就不更新
弊端:需要有后端配合 而且当visible为true的时候就要请求 较为浪费
tips:
visibilitychange可以监听到页面当前的是否在屏幕中显示 (可见性)
document.hidden 判断是否隐藏 true为隐藏
document.visibilityState ->hidden(最小化/不在当前页),visible(显示),prerender(渲染ing)
如 状态改变就可能跳到其他页面
前端并不能监听到其他页面的 点击动作
但是可以通过检测自身的状态来判断 决定是否刷新