vue專案如何監聽localStorage或sessionStorage的變化
阿新 • • 發佈:2021-01-06
出現這個問題的起因:在一個VUE頁面中,引入兩個元件,A元件實現基礎資訊展示,B元件展示列表,我要通過A元件的一個按鈕觸發狀態,然後B元件根據A元件觸發的狀態來做業務處理,首先想到的是把狀態放在localStorage,接下去就是在B元件怎麼監聽A元件狀態
解決方法:
1.首先在 main.js 中給 Vue.protorype 註冊一個全域性方法,然後建立一個 StorageEvent 方法,當我在執行sessionStorage.setItem(k,val) 的時候,初始化事件並派發事件。
/** * @description * @author (Set the text for this tag by adding docthis.authorName to your settings file.) * @date 2019-05-29 * @param { number } type 1 localStorage 2 sessionStorage * @param { string } key 鍵 * @param { string } data 要儲存的資料 * @returns */ 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('setItem',false,k,null,val,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,data); } }
還有一個簡單封裝監聽localStorage
2.在A元件中呼叫——寫入快取
this.$addStorageEvent(2,"user_info",data);
或者
this.resetSetItem('watchStorage',jsonObj);
3.在B元件中監聽
window.addEventListener('setItem',(e) => { console.log(e); });
或者
window.addEventListener('setItem',()=> { this.newVal = sessionStorage.getItem('watchStorage'); var data=JSON.parse(this.newVal) console.log(data) })
以上就是vue 專案如何監聽localStorage或sessionStorage的變化的詳細內容,更多關於vue 專案監聽localStorage或sessionStorage的資料請關注我們其它相關文章!