快捷導(dǎo)航

vue實(shí)現(xiàn)監(jiān)聽(tīng)localstorage值變化

更新時(shí)間：2022年08月31日 09:21:37 作者：吳小恩

這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽(tīng)localstorage值變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue監(jiān)聽(tīng)localstorage值變化

在vue中實(shí)現(xiàn)監(jiān)聽(tīng)localstorage中某個(gè)鍵對(duì)應(yīng)的值的變化

在根目錄下創(chuàng)建一個(gè)名為utils的文件夾,在文件夾中創(chuàng)建一個(gè)tool.js文件

//****將這段內(nèi)容放在tool.js文件中****
// 重寫(xiě)setItem事件，當(dāng)使用setItem的時(shí)候，觸發(fā)，window.dispatchEvent派發(fā)事件
function dispatchEventStroage() {
? ? const signSetItem = localStorage.setItem
? ? localStorage.setItem = function(key, val) {
? ? ? ? let setEvent = new Event('setItemEvent')
? ? ? ? setEvent.key = key
? ? ? ? setEvent.newValue = val
? ? ? ? window.dispatchEvent(setEvent)
? ? ? ? signSetItem.apply(this, arguments)
? ? }
}

export default dispatchEventStroage;

在main.js中引入使用

import tool from "./utils/tool";

Vue.use(tool);

在需要監(jiān)聽(tīng)localstorage中數(shù)據(jù)變化的文件中加以下代碼

//解決this指向問(wèn)題，在window.addEventListener中this是指向window的。
//需要將vue實(shí)例賦值給_this,這樣在window.addEventListener中通過(guò)_this可以為vue實(shí)例上data中的變量賦值
let _this=this;
//根據(jù)自己需要來(lái)監(jiān)聽(tīng)對(duì)應(yīng)的key
window.addEventListener("setItemEvent",function(e){
?? ?//e.key : 是值發(fā)生變化的key
?? ?//例如 e.key==="token";
?? ?//e.newValue : 是可以對(duì)應(yīng)的新值
?? ?if(e.key==="token"){
?? ??? ?console.log(e.newValue);
?? ??? ?_this.token=e.newValue;
?? ?}
})

到這里就可以在localstorage中token的值變化時(shí)在控制臺(tái)輸出新的值了 , 此方法只能監(jiān)聽(tīng)到setItem事件.

監(jiān)聽(tīng)localStorage中值的變化實(shí)現(xiàn)跨頁(yè)面通信

分享一個(gè)之前困擾很久的，跨頁(yè)面之間的通信方式。

以前跨頁(yè)面通信，就拿我們之前vue項(xiàng)目中多頁(yè)面為例，每個(gè)頁(yè)面都是一個(gè)獨(dú)立的vue實(shí)例，通過(guò)main.js初始化，各個(gè)頁(yè)面之間的數(shù)據(jù)不互通，而通信方式最常見(jiàn)的方式是往緩存中存儲(chǔ)值，其他需要得到這個(gè)值的頁(yè)面通過(guò)定時(shí)器去實(shí)時(shí)查詢緩存中該值的變化，然后進(jìn)行通信。

但是定時(shí)器終究不是一個(gè)好的實(shí)現(xiàn)方式，而定時(shí)器的時(shí)間長(zhǎng)短設(shè)置多少都很有考究，時(shí)間太短太耗性能，時(shí)間太長(zhǎng)的話，又會(huì)存在一段時(shí)間拿不到最新值的情況。

現(xiàn)在有一個(gè)很方便的方式，那就是監(jiān)聽(tīng)，其他頁(yè)面正常像以前一樣往 storage 存儲(chǔ)值，如：localStorage.setItem(‘calling’, ‘55894’)，然后需要獲取該值的頁(yè)面可以通過(guò)監(jiān)聽(tīng)storage，就直接拿到變化后的值，示例如下：

// localhost:8080/pageOne 頁(yè)面
localStorage.setItem('calling', '55894')

// localhost:8080/pageTwo 頁(yè)面
window.addEventListener('storage', event => {
	if(event.key === 'calling') {
		services.call(event.newValue)
	}
})

部分屬性介紹如下

event.key：屬性值為在 sessionStorage 或 localStorage 中被修改/新添加的數(shù)據(jù)鍵值；
event.oldValue：屬性值為在 sessionStorage 或 localStorage 中被修改前的值；
event.newValue：屬性值為在 sessionStorage 或 localStorage 中被修改后的值；
event.url：屬性值為修改 sessionStorage 或 localStorage 中值的頁(yè)面的URL地址，即該值在哪個(gè)頁(yè)面被寫(xiě)入/被修改的；

tips：只能監(jiān)聽(tīng) sessionStorage 或 localStorage 中值的變化，不能監(jiān)聽(tīng)cookie中值的變化。