一、问题
在项目开发过程中,发现有很多时候进行localStorage.setItem()
操作设置本地存储后,页面必须刷新才能够获取到存储数据,而有些时候本地缓存更新后,页面无法通过再次刷新以获取本地缓存,这就导致依赖本地缓存的数据无法进行更新。为了解决这个问题,就必须要用到自定义localStorage
监听事件了
二、解决方法
下面以Vue3项目为例进行自定义localStorage
监听事件方法阐述。
首先,在根目录src
目录下新建utils
文件夹,在utils
文件夹下新增overwrite.js
文件,文件内容如下:
// 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)
}
}
接下来,在项目的入口文件main.js
下引入自定义的重写方法
1、引入文件的方法
import {dispatchEventStroage} from "./utils/overwrite"
2、全局使用即可。
dispatchEventStroage()
3、完整main.js
引入的示例,如有不清楚的地方请参考下面的完整main.js
示例:
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)
})
标签:自定义,app,setItem,dispatchEventStroage,localStorage,import,监听
From: https://www.cnblogs.com/bokemoqi/p/18305674