【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)
相关推荐
2501_916008893 分钟前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu34 分钟前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una42 分钟前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao1 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇1 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪1 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子1 小时前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍1 小时前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星2 小时前
css3新增背景图片样式
前端·css·css3
书唐瑞2 小时前
谷歌浏览器和火狐浏览器对HTML的嗅探(Sniff)能力
前端·html