vue中如何监听localStorage值的变化

最新推荐文章于 2024-08-09 10:40:27 发布

前端开心果

最新推荐文章于 2024-08-09 10:40:27 发布

阅读量3.6k

点赞数 3

分类专栏： vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38157825/article/details/127171367

版权

vue3 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

实现方法：重写localStorage的setItem方法。

当调用 setItem 方法的时候，添加new Event('setItemEvent')，再使用window.dispatch() 方法派发事件，以此通过 window来监听当前事件

/src/plugins/localstorage.ts

export default function dispatchEventStroage () {
  const signSetItem = localStorage.setItem
  localStorage.setItem = function (key, val) {
    let setEvent: any = new Event('setItemEvent')
    setEvent.key = key
    setEvent.newValue = val
    window.dispatchEvent(setEvent)
    signSetItem.apply(this, arguments)
  }
}

main.ts

import { createApp } from 'vue'
import App from './app.vue'
import tool from '@/plugins/localstorage'

const app = createApp(App)
app.use(tool)

app.vue

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  window.addEventListener('setItemEvent', () => {
    consloe.log('监听localStorage的变化')
  })
})
</script>