目录一、问题在项目开辟过程中，发现有许多时候举行[code]localStorage.setItem()[/code]操纵设置当地存储后，页面必须刷新才可以大概获取到存储数据，而有些时候当地缓存更新后，页面无法通过再次刷新以获取当地缓存，这就导致依赖当地缓存的数据无法举行更新。为了解决这个问题，就必须要用到自定义[code]localStorage[/code]监听事故了 二、解决方法下面以Vue3项目为例举行自定义[code]localStorage[/code]监听事故方法论述。 首先，在根目录[code]src[/code]目录下新建[code]utils[/code]文件夹，在[code]utils[/code]文件夹下新增[code]overwrite.js[/code]文件，文件内容如下： [code]// 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) } } [/code]接下来，在项目的入口文件[code]main.js[/code]下引入自定义的重写方法 1、引入文件的方法 [code]import {dispatchEventStroage} from "./utils/overwrite" [/code]2、全局使用即可。 [code]dispatchEventStroage() [/code]3、完整[code]main.js[/code]引入的示例，如有不清楚的地方请参考下面的完整[code]main.js[/code]示例： [code]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') [/code]末了，在须要的地方使用即可，使用示例如下： [code]window.addEventListener('setItemEvent', (e) => { console.log("监听到触发了localStorage.setItem事故",e) }) [/code]到此这篇关于JavaScript自定义localStorage监听事故的解决方法的文章就先容到这了,更多相关JS自定义localStorage监听事故内容请搜刮脚本之家以前的文章或继续浏览下面的相关文章希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/328964czz.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-10-15 15:24 , Processed in 0.068082 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
