vue項目中監聽sessionStorage值發生變化

首先在main.js中給Vue.protorype註冊一個全局方法，

其中，咱們約定好了想要監聽的sessionStorage的key值爲’watchStorage’，

而後建立一個StorageEvent方法，當我在執行sessionStorage.setItem(k, val)這句話的時候，初始化事件，並派發事件。

 1 Vue.prototype.resetSetItem = function (key, newVal) {  2    if (key === 'watchStorage') {  3 
 4        // 建立一個StorageEvent事件
 5        var newStorageEvent = document.createEvent('StorageEvent');  6        const storage = {  7            setItem: function (k, val) {  8  sessionStorage.setItem(k, val);  9 
10                // 初始化建立的事件
11                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null); 12 
13                // 派發對象
14  window.dispatchEvent(newStorageEvent) 15  } 16  } 17        return storage.setItem(key, newVal); 18  } 19 }

1 如何觸發 2 在一個路由(好比路由A)存儲值得時候，使用下面的方法： 3 this.resetSetItem('watchStorage', 11111);

1 如何監聽 2 若是在另一個路由(好比路由B)中，咱們想根據watchStorage的變化來請求接口刷新頁面數據的時候，能夠在這個路由中created鉤子函數中監聽： 3 window.addEventListener('setItem', ()=> { 4     this.newVal = sessionStorage.getItem('watchStorage'); 5 }) 6 ————————————————