vue如何監(jiān)聽頁面緩存事件
監(jiān)聽頁面緩存事件
事情的起因是這樣的
項(xiàng)目中需要用到websocket，在網(wǎng)頁剛打開的時候，就要進(jìn)行對話的連接綁定，就我這菜鳥來說，第一次這么搞事情，也是剛接觸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ù)器返回的信息并存入緩存，在其他組件，比如回話列表頁面就可以實(shí)時更新列表，包括對話頁面。
監(jiān)聽緩存事件代碼
隨著H5的更新，前端經(jīng)常使用本地存儲進(jìn)行交互處理數(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ù)代碼
進(jìn)行緩存使用
?this.$addStorageEvent(0, "useStorage",?
? ? // 寫入數(shù)據(jù)
? ? JSON.stringify({ a:1 })
?);以上就是全部代。僅為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中對象數(shù)組去重的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue 輸入電話號碼自動按3-4-4分割功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 輸入電話號碼自動按3-4-4分割功能的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點(diǎn),你可以使用ref來引用子組件,然后通過$refs來訪問子組件的DOM,下面這篇文章主要給大家介紹了關(guān)于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue3實(shí)現(xiàn)問卷調(diào)查的示例代碼
本文主要介紹了vue3實(shí)現(xiàn)問卷調(diào)查的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue中v-for通過動態(tài)綁定class實(shí)現(xiàn)觸發(fā)效果
這篇文章主要介紹了vue中v-for通過動態(tài)綁定class實(shí)現(xiàn)觸發(fā)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
element-ui 插槽自定義樣式居中效果實(shí)現(xiàn)思路
這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡單來講實(shí)現(xiàn)思路是通過template標(biāo)簽可理解為一個內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下2024-07-07
vue canvas繪制矩形并解決由clearRec帶來的閃屏問題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來的閃屏問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue微信分享到朋友圈，vue微信發(fā)送給好友功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
在Vue中獲取自定義屬性方法:data-id的實(shí)例
這篇文章主要介紹了在Vue中獲取自定義屬性方法:data-id的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue2 如何實(shí)現(xiàn)div contenteditable=“true”(類似于v-model)的效果
這篇文章主要給大家介紹了利用vue2如何實(shí)現(xiàn)div contenteditable="true"，就是類似于v-model的效果，文中給出了兩種解決的思路，對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02