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

沉默微笑

一、问题

在项目开发过程中，发现有很多时候进行

1. localStorage.setItem()

复制代码

操作设置本地存储后，页面必须刷新才能够获取到存储数据，而有些时候本地缓存更新后，页面无法通过再次刷新以获取本地缓存，这就导致依赖本地缓存的数据无法进行更新。为了解决这个问题，就必须要用到自定义

1. localStorage

复制代码

监听事件了

二、解决方法

下面以Vue3项目为例进行自定义

1. localStorage

复制代码

监听事件方法阐述。
首先，在根目录

1. src

复制代码

目录下新建

1. utils

复制代码

文件夹，在

1. utils

复制代码

文件夹下新增

1. overwrite.js

复制代码

文件，文件内容如下：

1. // overwrite.js
   
2. 
   
3. // 重写setItem事件，当使用setItem的时候，触发，window.dispatchEvent派发事件
   
4. export function dispatchEventStroage () {
   
5.     const signSetItem = localStorage.setItem
   
6.     localStorage.setItem = function (key, val) {
   
7.       let setEvent = new Event('setItemEvent')
   
8.       setEvent.key = key
   
9.       setEvent.newValue = val
   
10.       window.dispatchEvent(setEvent)
    
11.       signSetItem.apply(this, arguments)
    
12.     }
    
13.   }
    
14.   

复制代码

接下来，在项目的入口文件

1. main.js

复制代码

下引入自定义的重写方法
1、引入文件的方法

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

复制代码

2、全局使用即可。

1. dispatchEventStroage()

复制代码

3、完整

1. main.js

复制代码

引入的示例，如有不清楚的地方请参考下面的完整

1. main.js

复制代码

示例：

1. import {createApp} from 'vue'
   
2. import './style.css'
   
3. import App from './App.vue'
   
4. import router from './router'
   
5. import {createPinia} from 'pinia'
   
6. import screenShort from "vue-web-screen-shot";
   
7. import {dispatchEventStroage} from "./utils/overwrite"
   
8. 
   
9. const app = createApp(App)
   
10. 
    
11. dispatchEventStroage()
    
12. 
    
13. app.use(router)
    
14. app.use(createPinia())
    
15. app.use(screenShort, {enableWebRtc: true})
    
16. app.mount('#app')

复制代码

最后，在需要的地方使用即可，使用示例如下：

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

复制代码

到此这篇关于JavaScript自定义localStorage监听事件的解决方法的文章就介绍到这了,更多相关JS自定义localStorage监听事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/328964czz.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！