如何监听Storage值的变化

问题：最近在做vue项目时遇到一个监听storage值变化的问题，当时直接在watch进行监听发现不能及时监听到其数值的变化。

解决：查阅一些博客后找到一种解决方案，特此分享给大家：

第一步：在window或Vue实例上绑定一个StorageEvent事件：

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, false, k, null, val, null, 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, val);// 初始化创建的事件newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);// 派发对象window.dispatchEvent(newStorageEvent);}}return storage.setItem(key, data);}
}

第二步：在设置storage时进行调用：

 this.$addStorageEvent('存储类型', "事件名字",'storage存储的值');

第三步：具体监听数据值的变化：

window.addEventListener('setItem', (e) => {console.log(e, '变化的值');});