怎样在同一个浏览器中多个标签页同时更新数据？

Question

怎样在同一个浏览器中多个标签页同时更新数据？
就像QQ音乐一样，打开多个音乐播放标签页，添加一首歌，所有的音乐播放标签页同时更新。
QQ音乐播放地址：https://y.qq.com/n/ryqq/player

Answer 1

前端处理的话使用postMessage,后端的话就是长连接或者轮询。

Answer 2

通过监听 storage 是否改变实现，受同源策略限制

window.addEventListener('storage', (e) => {
  // storage changed
});

Answer 3

BroadcastChannel

Answer 4

多个标签页共享数据可以使用Window.localStorage

浏览器缓存比较可参考：https://www.kancloud.cn/yunzhiclub/angularguide/2176484

vue的话，在Window.localStorage在个标记符就好，比如标记符名称为lastUpdateTime。然后在每隔一段时间来查看这个标记符是否发生了变化，如果发生了变化就说明需要重新拉取缓存中的其它数据。

private lastUpdateTime: string;
private key = 'lastUpdateTime';

/**
* 更新数据
*/
update(data: any): void {
  this.lastUpdateTime = new Date().getTime() + '';
  
  Window.localStorage.setItem(this.key, this.lastUpdateTime + '');
  // 以下更新数据
}

/**
* 监听数据
*/
listen(): void {
   setInterval(() => {
      const lastUpdateTime = Window.localStorage.getItem(this.key);
      if (this.lastUpdateTime !== lastUpdateTime) {
        this.lastUpdateTime = lastUpdateTime;
        // 检测到了变化，获取缓存中的数据后，进来相关的更新操作。
      }
   }, 1000)
}