实现方法:重写localStoragesetItem方法。

当调用 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>
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐