JavaScript自定义localStorage监听事件的解决方法-牛翰网

一、问题

在项目开发过程中，发现有很多时候进行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)
  })

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

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END

Vue.js 前端开发编程开发
# JavaScript # 自定义 # localStorage # 监听事件