JavaScript自定义localStorage监听事件的解决方法

// overwrite.js

// 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
export function dispatchEventStroage () {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function (key, val) {
      let setEvent = new Event('setItemEvent')
      setEvent.key = key
      setEvent.newValue = val
      window.dispatchEvent(setEvent)
      signSetItem.apply(this, arguments)
    }
  }
  

import {dispatchEventStroage} from "./utils/overwrite"

dispatchEventStroage()

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import {createPinia} from 'pinia'
import screenShort from "vue-web-screen-shot";
import {dispatchEventStroage} from "./utils/overwrite"

const app = createApp(App)

dispatchEventStroage()

app.use(router)
app.use(createPinia())
app.use(screenShort, {enableWebRtc: true})
app.mount('#app')

window.addEventListener('setItemEvent', (e) => {
      console.log("监听到触发了localStorage.setItem事件",e)
  })