一、问题
在项目开发过程中，发现有很多时候进行localStorage.setItem()操作设置本地存储后，页面必须刷新才能够获取到存储数据，而有些时候本地缓存更新后，页面无法通过再次刷新以获取本地缓存，这就导致依赖本地缓存的数据无法进行更新。为了解决这个问题，就必须要用到自定义localStorage监听事件了
二、解决方法
下面以Vue3项目为例进行自定义localStorage监听事件方法阐述。
首先，在根目录src目录下新建utils文件夹，在utils文件夹下新增overwrite.js文件，文件内容如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 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、引入文件的方法
1 | import {dispatchEventStroage} from "./utils/overwrite" |
2、全局使用即可。
1 | dispatchEventStroage() |
3、完整main.js引入的示例，如有不清楚的地方请参考下面的完整main.js示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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') |
最后，在需要的地方使用即可，使用示例如下：
1 2 3 | window.addEventListener('setItemEvent', (e) => { console.log("监听到触发了localStorage.setItem事件",e) }) |
到此这篇关于JavaScript自定义localStorage监听事件的解决方法的文章就介绍到这了,更多相关JS自定义localStorage监听事件内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
