您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在vue項(xiàng)目中監(jiān)聽localStorage與sessionStorage的變化,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
解決方法:
/** * @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 要存儲(chǔ)的數(shù)據(jù) * @returns */ Vue.prototype.$addStorageEvent = function (type, key, data) { if (type === 1) { // 創(chuàng)建一個(gè)StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const storage = { setItem: function (k, val) { localStorage.setItem(k, val); // 初始化創(chuàng)建的事件 newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null); // 派發(fā)對(duì)象 window.dispatchEvent(newStorageEvent); } } return storage.setItem(key, data); } else { // 創(chuàng)建一個(gè)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ā)對(duì)象 window.dispatchEvent(newStorageEvent); } } return storage.setItem(key, data); } }
還有一個(gè)簡單封裝監(jiān)聽localStorage
this.$addStorageEvent(2, "user_info", data);
或者
this.resetSetItem('watchStorage', jsonObj);
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項(xiàng)目中監(jiān)聽localStorage與sessionStorage的變化了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。