VUE中使用localStorage实现跨标签页面的通信

前言

目前出现了一个需求，需要父页面打开新的子页面，子页面提交表单之后，关闭子页面，然后把数据返回给父页面。
本来考虑使用sharedWorker，但是由于兼容性太差了，就弃用了。看到网上的介绍可以使用localStorage来实现，我就尝试了下。下面是一些具体的细节。

开始

整体流程如图所示：

需求分析

1. 子页面需要知道自己的父页面对应的是谁，所以父页面打开子页面的时候需要传输一个父页面的KEY值
2. 由于表单是使用dialog来显示，需要注意避免出现事件重复注册的，及时销毁事件，保留监听事件的唯一。
3. 由于保存的时候只会出现单一数据变化，所以只需要维护同一个localStorage对象即可。
4. 父页面接受数据的时候，也需要校验子页面传输的数据是否属于自己。
5. 最终的数据是否关联成功，由父页面的保存决定，子页面的数据是无状态的。

实现原理

localStorage中支持监听storage变化时的事件，并且只有在不同标签页面，同源网页的时候才会触发，这里恰好解决的我们的需求:
window.addEventListener('storage', callback);

代码实现

由于localStorage的API比较简单， 所以这里就不在这里介绍。
为了后续的拓展和方便调用，我这里就将localStorage一些操作做了简单的封装。

function generateUUID() {
   
   
  let d = new Date().getTime();
  if (window.performance && typeof window.performance.now === 'function') {
   
   
    d += performance.now(); // use high-precision timer if available
  }
  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
   
   
    // eslint-disable-next-line no-bitwise
    const r