zoukankan      html  css  js  c++  java
  • 在vue中监听storage的变化

    1、首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEvent方法,当我在执行sessionStorage.setItem(k, val)这句话的时候,初始化事件,并派发事件。

    Vue.prototype.resetSetItem = function (key, newVal) {
       if (key === 'watchStorage') {
    
           // 创建一个StorageEvent事件
           var newStorageEvent = document.createEvent('StorageEvent');
           const storage = {
               setItem: function (k, val) {
                   sessionStorage.setItem(k, val);
    
                   // 初始化创建的事件
                   newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
    
                   // 派发对象
                   window.dispatchEvent(newStorageEvent)
               }
           }
           return storage.setItem(key, newVal);
       }
    }

    2、如何触发
    在一个路由(比如路由A)存储值得时候,使用下面的方法:

    this.resetSetItem('watchStorage', this.value);

    3、如何监听
    如果在另外一个路由(比如路由B)中,我们想根据watchStorage的变化来请求接口刷新页面数据的时候,可以在这个路由中created钩子函数中监听:

    window.addEventListener('setItem', ()=> {
        this.newVal = sessionStorage.getItem('watchStorage');
    })
  • 相关阅读:
    vue过滤器filters
    vue指令
    java命令
    mysql的information_schema表
    es6 Object的keys values entries方法
    mysql information_schema.INNODB_TRX
    流动相似性例子
    【转】time 模块详解(时间获取和转换)
    查找——平衡二叉树的实现(代码超详细注释)
    py中变量名的“秘密”
  • 原文地址:https://www.cnblogs.com/scale/p/10973069.html
Copyright © 2011-2022 走看看