VUE监听本地存储

最新推荐文章于 2025-04-18 15:36:13 发布

Colossus丶

最新推荐文章于 2025-04-18 15:36:13 发布

阅读量509

点赞数

分类专栏： Vue 本地储存文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_40472157/article/details/129583433

版权

Vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

本地储存

1 篇文章

订阅专栏

文章介绍了如何在Vue中创建一个名为retSetItem的自定义事件来监听本地存储的变化，特别是当key为playFlagState时。通过创建StorageEvent并触发window.dispatchEvent，实现了在存储变化时执行相应操作。此外，还展示了如何调用这个自定义事件以及设置监听器来捕获playFlagState的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE监听本地存储

创建自定义事件retSetItem

Vue.prototype.resSetItem = (key, newVal) => {
		if (key === 'playFlagState') { 
		//监听本地存储 key为 playFlagState时 创建新的监听事件
		    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, newVal)
	  }

}

事件调用

   this.resSetItem("playFlagState", this.palyFlagState);

事件监听触发


	window.addEventListener('setItem', () => {
      console.log('playFlagState',sessionStorage.getItem('playFlagState'))
      // ...do ...
    })