Vue 监听缓存事件(亲测有效)

时间:2025-04-08 07:14:51

 摘要: 随着H5的更新,前端经常使用本地存储进行交互处理数据,如果想要监听缓存的变化,以下代码就是您想要的。
一、在main创建缓存事件

// 监听缓存事件
.$addStorageEvent = function(type, key, data) {
    if (type === 1) {
        // 创建一个StorageEvent事件
        var newStorageEvent = ("StorageEvent");
        const storage = {
            setItem: function(k, val) {
                (k, val);
                // 初始化创建的事件
                (
                    "storageItem",
                    false,
                    false,
                    k,
                    null,
                    val,
                    null,
                    null
                );
                // 派发对象
                (newStorageEvent);
            },
        };
        return (key, data);
    } else {
        // 创建一个StorageEvent事件
        var newStorageEvent = ("StorageEvent");
        const storage = {
            setItem: function(k, val) {
                (k, val);
                // 初始化创建的事件
                (
                    "setItem",
                    false,
                    false,
                    k,
                    null,
                    val,
                    null,
                    null
                );
                // 派发对象
                (newStorageEvent);
            },
        };
        return (key, data);
    }
};

二、在组件生命周期中 监听缓存事件并取值

    (
      "stotageItem",
      (e) => { // e代表存储的数据 { a:1 }
        ()
      },
      false
    );

三、在组件业务代码 进行缓存使用

 this.$addStorageEvent(0, "useStorage", 
    // 写入数据
    ({ a:1 })
 );

总结:以上就是全部代码。感兴趣的可以留个关注啊~~~