vue 项目中通过监听 localStorage 的变化进行父子页面传参

Posted 2022-02-01 木偶跳舞

vue实时监听 localStorage 变化

应用场景：

1、页面B需要实时获取页面A数据更改

2、父子页面之间的传参

代码实例

B页面实时获取A页面的数据变化

在【页面A】进行缓存修改or插入缓存

localStorage.setItem('product_process_uid', parentinputname + '#' + data.uid + '#' + data.nickname);

在【页面B】需要监听缓存值更改

mounted: function () 
    var that = this;

    //监听 localStorage 缓存中指定key的值变化,本例key为 product_process_uid
    window.addEventListener('storage', function (e) 
      if (e.key && e.key == 'product_process_uid' && e.newValue) 
        that.product_process_uid = e.newValue;

        // 监听到值后的处理逻辑
        that.product_process_uid = that.product_process_uid.split('#');
        that.formData.product_process[that.product_process_uid[0]].user_id = that.product_process_uid[1];
        that.formData.product_process[that.product_process_uid[0]].user_name = that.product_process_uid[2];

        // 根据实际情况，判断处理完后是否要删除这个key
        localStorage.removeItem('product_process_uid');
      
    )

如上即可在【页面B】实时获取到【页面A】中的数据。

注意

页面必须是同源（即同一个域名，例如：都在https://www.baidu.com/域名下）

参考文档：

https://blog.csdn.net/qq_38902230/article/details/110233216

————————————————
原文作者：木偶
原文链接：https://www.muouseo.com/article/rpnv35ewm5.html