夸窗口通信

一.介绍

虽然日常开发并不常见，偶尔还是会闪现这样一个需求： 一个项目同时打开了两个页面，一个页面的某个操作我想让另一个页面也同时响应；比如商品列表页面点击收藏按钮，这个商品详情页面的收藏图标也同时变成确定状态

二. 实现方法

1.方法一

    监听localStorage变化的事件——storage

window.addEventListener('storage', change)

监听触发change事件

在一个页面改变 localStorage的值 触发另一个页面的change事件

2.方法二

通过Broadcast Channel来实现(同源下)

在第一个页面

const setChannel = new BroadcastChannel('newDemo')

  setChannel.postMessage('要发送消息')//.postMessage发送消息

在第二个页面

const setChannel = new BroadcastChannel('newDemo')
setChannel.onmessage = (e) => {
  console.log('接收到消息:', e.data)
}

.onmessage监听消息 

注意实例化时通信的两个窗口页面 需要相同字段（newDemo）

 

这就完成了！！！！