前端 另一页面点击保存，当前页面刷新数据 实现方法

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）

如 状态改变就可能跳到其他页面 

前端并不能监听到其他页面的 点击动作

但是可以通过检测自身的状态来判断 决定是否刷新