【React】如何监听LocalStorage的变化

在代码中遇到了需要在react中监听localStorage的数据,下意识想到的是按照useEffect监听useState变化那一套,但是未生效。

代码如下:

javascript 复制代码
useEffect(()=>{
    console.log("变化了")
},[localStorage.getItem('data')])

需要使用监听器

javascript 复制代码
useEffect(() => {
  function checkData() {
    const item = localStorage.getItem('data')

    if (item) {
      setData(item)
    }
  }

  window.addEventListener('storage', checkData)

  return () => {
    window.removeEventListener('storage', checkData)
  }
}, [])

但是上述方式有弊端,只能监听同源的两个页面之间的 storage 变更,没法监听同一个页面的变更。

需要自定义事件

javascript 复制代码
const originalSetItem = localStorage.setItem
localStorage.setItem = function (key, newValue) {
  const setItemEvent = new Event("setItemEvent")
  setItemEvent[key] = newValue
  window.dispatchEvent(setItemEvent)
  originalSetItem.apply(this, [key, newValue])
}

// 添加事件监听器
function handleSetItemEvent(event) {
  console.log("监听到本地存储发生变化了:", event)
  console.log("Key:", Object.keys(event)[0])
  console.log("Value:", event[Object.keys(event)[0]])
}
window.addEventListener("setItemEvent", handleSetItemEvent)

// 当不再需要时,移除事件监听器
window.removeEventListener("setItemEvent", handleSetItemEvent)
相关推荐
苳烨6 分钟前
UniApp使用最新版Android Studio本地离线打包全流程
前端
Monly219 分钟前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js
李剑一11 分钟前
别再用HTTP/1这个老古董了,两招帮你升级HTTP/2
前端·架构
t20071818 分钟前
4.27 react第一天
前端·react.js·前端框架
飞天牛牛22 分钟前
前端小知识:彻底搞懂 CSS 的 `position: sticky`!
前端
大名人儿33 分钟前
【JS事件循环机制event-loop】
javascript·事件循环·宏任务·微任务·event-loop
vim怎么退出33 分钟前
46.二叉树展开为链表
前端·leetcode
薛定谔的猫240 分钟前
Composition API的深入理解与最佳实践
前端·vue.js
NaN_37242 分钟前
新手教程-使用 Android Studio 搭建 React Native 项目开发环境
前端
天天扭码1 小时前
JavaScript 中 apply 和 call 方法的区别与应用场景
前端·javascript·面试