vue如何監(jiān)聽頁面緩存事件
更新時間：2022年05月05日 08:47:55 作者：Mosowe
這篇文章主要介紹了vue如何監(jiān)聽頁面緩存事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
監(jiān)聽頁面緩存事件
事情的起因是這樣的
項目中需要用到websocket，在網(wǎng)頁剛打開的時候，就要進行對話的連接綁定，就我這菜鳥來說，第一次這么搞事情，也是剛接觸websocket沒多久，這咋整??？在App.vue中設(shè)置了綁定，所有的信息返回都在app.vue組件里面，但是其他組件怎么去獲取？而且需要緩存到本地。而當(dāng)初我還沒接觸vuex，所以在其他組件里面獲取服務(wù)器返回的信息只能借助于localStorage，這就郁悶了，這緩存咋監(jiān)聽呀？
首先在main.js里面配置vue原型：
Vue.prototype.resetSetItem = (key, newVal) => {
? if (key === 'websocketHistory') {
? ? // 創(chuàng)建一個StorageEvent事件
? ? let newStorageEvent = document.createEvent('StorageEvent');
? ? const storage = {
? ? ? setItem: (k, val) => {
? ? ? ? localStorage.setItem(k, val);
? ? ? ? // 初始化創(chuàng)建的事件
? ? ? ? newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
? ? ? ? // 派發(fā)對象
? ? ? ? window.dispatchEvent(newStorageEvent);
? ? ? }
? ? };
? ? return storage.setItem(key, newVal);
? }
};這個時候，在其他頁面寫入緩存就不能直接用localStorage了
你需要這么設(shè)置
this.resetSetItem('websocketHistory', data);然后在需要監(jiān)聽的頁面中，created函數(shù)中使用
window.addEventListener('setItem', () => {
? console.log(JSON.parse(localStorage.getItem('websocketHistory'))); ? ??
});如此，便能在app.vue組件中使用獲取服務(wù)器返回的信息并存入緩存，在其他組件，比如回話列表頁面就可以實時更新列表，包括對話頁面。
監(jiān)聽緩存事件代碼
隨著H5的更新，前端經(jīng)常使用本地存儲進行交互處理數(shù)據(jù)，如果想要監(jiān)聽緩存的變化，以下代碼就是您想要的。
在main創(chuàng)建緩存事件
// 監(jiān)聽緩存事件
Vue.prototype.$addStorageEvent = function(type, key, data) {
if (type === 1) {
// 創(chuàng)建一個StorageEvent事件
var newStorageEvent = document.createEvent("StorageEvent");
const storage = {
setItem: function(k, val) {
localStorage.setItem(k, val);
// 初始化創(chuàng)建的事件
newStorageEvent.initStorageEvent(
"storageItem",
false,
false,
k,
null,
val,
null,
null
);
// 派發(fā)對象
window.dispatchEvent(newStorageEvent);
},
};
return storage.setItem(key, data);
} else {
// 創(chuàng)建一個StorageEvent事件
var newStorageEvent = document.createEvent("StorageEvent");
const storage = {
setItem: function(k, val) {
sessionStorage.setItem(k, val);
// 初始化創(chuàng)建的事件
newStorageEvent.initStorageEvent(
"setItem",
false,
false,
k,
null,
val,
null,
null
);
// 派發(fā)對象
window.dispatchEvent(newStorageEvent);
},
};
return storage.setItem(key, data);
}
};在組件生命周期中
監(jiān)聽緩存事件并取值
? ? window.addEventListener(
? ? ? "stotageItem",
? ? ? (e) => { // e代表存儲的數(shù)據(jù) { a:1 }
? ? ? ? JSON.parse(e.a)
? ? ? },
? ? ? false
? ? );在組件業(yè)務(wù)代碼
進行緩存使用
?this.$addStorageEvent(0, "useStorage",?
? ? // 寫入數(shù)據(jù)
? ? JSON.stringify({ a:1 })
?);以上就是全部代。僅為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue?Steam同款登錄驗證數(shù)字輸入框功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實現(xiàn)的內(nèi)容有制作一個登錄頁面，跳轉(zhuǎn)到首頁，首頁包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺網(wǎng)頁格式，菜單點擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容2021-09-09
這篇文章主要介紹了Vue-cropper 圖片裁剪的基本原理及思路講解，本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下2018-04-04
本文主要介紹了VUE 自定義取色器組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue打包后,用后端接口報錯304、404問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue使用Google Recaptcha驗證的實現(xiàn)示例
我們最近的項目中需要使用谷歌機器人驗證，所以就動手實現(xiàn)一下，本文就來詳細的介紹一下vue Google Recaptcha驗證，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了vue引用外部JS的兩種種方案,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
VueX 提供了一個全局都可以使用的數(shù)據(jù)管理倉庫，不用考慮父子傳值之類的問題，并且可以跨頁面?zhèn)鬟f數(shù)據(jù)，提高了可維護性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解vue簡單的store，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10