Vue 监听缓存事件(亲测有效)
摘要: 随着H5的更新,前端经常使用本地存储进行交互处理数据,如果想要监听缓存的变化,以下代码就是您想要的。一、在main创建缓存事件// 监听缓存事件Vue.prototype.$addStorageEvent = function(type, key, data) {if (type === 1) {// 创建一个StorageEvent事件var newStorageEvent = docu
·
摘要: 随着H5的更新,前端经常使用本地存储进行交互处理数据,如果想要监听缓存的变化,以下代码就是您想要的。
一、在main创建缓存事件
// 监听缓存事件
Vue.prototype.$addStorageEvent = function(type, key, data) {
if (type === 1) {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent("StorageEvent");
const storage = {
setItem: function(k, val) {
localStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent(
"storageItem",
false,
false,
k,
null,
val,
null,
null
);
// 派发对象
window.dispatchEvent(newStorageEvent);
},
};
return storage.setItem(key, data);
} else {
// 创建一个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, data);
}
};
二、在组件生命周期中 监听缓存事件并取值
window.addEventListener(
"stotageItem",
(e) => { // e代表存储的数据 { a:1 }
JSON.parse(e.a)
},
false
);
三、在组件业务代码 进行缓存使用
this.$addStorageEvent(0, "useStorage",
// 写入数据
JSON.stringify({ a:1 })
);
总结:以上就是全部代码。感兴趣的可以留个关注啊~~~
更多推荐
已为社区贡献6条内容
所有评论(0)