vue怎么實現監聽localstorage值變化

這篇文章主要講解了“vue怎么實現監聽localstorage值變化”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue怎么實現監聽localstorage值變化”吧！

vue監聽localstorage值變化

在vue中實現監聽localstorage中某個鍵對應的值的變化

在根目錄下創建一個名為utils的文件夾,在文件夾中創建一個tool.js文件

//****將這段內容放在tool.js文件中****
// 重寫setItem事件，當使用setItem的時候，觸發，window.dispatchEvent派發事件
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);

在需要監聽localstorage中數據變化的文件中加以下代碼

//解決this指向問題，在window.addEventListener中this是指向window的。
//需要將vue實例賦值給_this,這樣在window.addEventListener中通過_this可以為vue實例上data中的變量賦值
let _this=this;
//根據自己需要來監聽對應的key
window.addEventListener("setItemEvent",function(e){
    //e.key : 是值發生變化的key
    //例如 e.key==="token";
    //e.newValue : 是可以對應的新值
    if(e.key==="token"){
        console.log(e.newValue);
        _this.token=e.newValue;
    }
})

到這里就可以在localstorage中token的值變化時在控制臺輸出新的值了 , 此方法只能監聽到setItem事件.

監聽localStorage中值的變化實現跨頁面通信

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

以前跨頁面通信，就拿我們之前vue項目中多頁面為例，每個頁面都是一個獨立的vue實例，通過main.js初始化，各個頁面之間的數據不互通，而通信方式最常見的方式是往緩存中存儲值，其他需要得到這個值的頁面通過定時器去實時查詢緩存中該值的變化，然后進行通信。

但是定時器終究不是一個好的實現方式，而定時器的時間長短設置多少都很有考究，時間太短太耗性能，時間太長的話，又會存在一段時間拿不到最新值的情況。

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

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

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

部分屬性介紹如下

• event.key：屬性值為在 sessionStorage 或 localStorage 中被修改/新添加的數據鍵值；

• event.oldValue：屬性值為在 sessionStorage 或 localStorage 中被修改前的值；

• event.newValue：屬性值為在 sessionStorage 或 localStorage 中被修改后的值；

• event.url：屬性值為修改 sessionStorage 或 localStorage 中值的頁面的URL地址，即該值在哪個頁面被寫入/被修改的；

tips：只能監聽 sessionStorage 或 localStorage 中值的變化，不能監聽cookie中值的變化。

其余屬性截圖如下

感謝各位的閱讀，以上就是“vue怎么實現監聽localstorage值變化”的內容了，經過本文的學習后，相信大家對vue怎么實現監聽localstorage值變化這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！