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

痛并快乐着
  • 59

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

回复
阅读 559
4 个回答

前端处理的话使用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)
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏