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

  • Z时代
  • 2024-02-18
  • 分类：IT

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

怎样在同一个浏览器中多个标签页同时更新数据？
就像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)
}

以上是 怎样在同一个浏览器中多个标签页同时更新数据？ 的全部内容， 来源链接： utcz.com/p/935602.html

回到顶部