自定义localStorage监听事件

一、问题

在项目开发过程中,发现有很多时候进行localStorage.setItem()操作设置本地存储后,页面必须刷新才能够获取到存储数据,而有些时候本地缓存更新后,页面无法通过再次刷新以获取本地缓存,这就导致依赖本地缓存的数据无法进行更新。为了解决这个问题,就必须要用到自定义localStorage监听事件了

二、解决方法

下面以Vue3项目为例进行自定义localStorage监听事件方法阐述。

首先 ,在根目录src目录下新建utils文件夹,在utils文件夹下新增overwrite.js文件,文件内容如下:

javascript 复制代码
// 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、引入文件的方法

javascript 复制代码
import {dispatchEventStroage} from "./utils/overwrite"

2、全局使用即可。

javascript 复制代码
dispatchEventStroage()

3、完整main.js引入的示例,如有不清楚的地方请参考下面的完整main.js示例:

javascript 复制代码
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')

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

javascript 复制代码
window.addEventListener('setItemEvent', (e) => {
      console.log("监听到触发了localStorage.setItem事件",e)
  })
相关推荐
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘5 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾5 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉5 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)5 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中6 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互