18910140161

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

顺晟科技

2021-07-09 11:25:36

80

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

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

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

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

BroadcastChannel

多个标签页共享数据可以使用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)
}
相关文章
随机推荐
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航