【NuxtJs】 如何实现浏览器内多个标签页之间的通信 ?(阿里)

一：简介

做支付会遇到的问题

有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。

pagehide
beforeunload
unload

二：WebSocket、SharedWorker；

这个这次没有用到，但是可以解决这个问题

三 ：localstorge、cookies 等本地存储方式；

localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信； 注意
quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

window.addEventListener("storage", function (e) {
        alert(e.newValue);
});

四：页面可见性（Page Visibility API） 可以有哪些用途 ？

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

五、document.visibilityState

visibilitychange 事件

只要document.visibilityState属性发生变化，就会触发visibilitychange事件。因此，可以通过监听这个事件（通过document.addEventListener()方法或document.onvisibilitychange属性），跟踪页面可见性的变化。

document.addEventListener('visibilitychange', function () {
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    document.title = '页面不可见';
  }

  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    document.title = '页面可见';
  }
});

上面代码是 Page Visibility API 的最基本用法，可以监听可见性变化。

下面是另一个例子，一旦页面不可见，就暂停视频播放。

var vidElem = document.getElementById('video-demo');
document.addEventListener('visibilitychange', startStopVideo);

function startStopVideo() {
  if (document.visibilityState === 'hidden') {
    vidElem.pause();
  } else if (document.visibilityState === 'visible') {
    vidElem.play();
  }
}

六、页面卸载

下面专门讨论一下，如何正确监听页面卸载。

页面卸载可以分成三种情况

页面可见时，用户关闭 Tab 页或浏览器窗口。
页面可见时，用户在当前窗口前往另一个页面。
页面不可见时，用户或系统关闭浏览器窗口。

这三种情况，都会触发visibilitychange事件。前两种情况，该事件在用户离开页面时触发；最后一种情况，该事件在页面从可见状态变为不可见状态时触发。
由此可见，visibilitychange事件比pagehide、beforeunload、unload事件更可靠，所有情况下都会触发（从visible变为hidden）。因此，可以只监听这个事件，运行页面卸载时需要运行的代码，不用监听后面那三个事件。
甚至可以这样说，unload事件在任何情况下都不必监听，beforeunload事件只有一种适用场景，就是用户修改了表单，没有提交就离开当前页面。另一方面，指定了这两个事件的监听函数，浏览器就不会缓存当前页面。