【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)
相关推荐
Cache技术分享几秒前
36. Java 控制流语句 Break 语句
前端·后端
海拥2 分钟前
php+mysql 搭建一个在线游戏网站目前已有2000+游戏【代码解析 一】
前端
GOTXX9 分钟前
BoostSiteSeeker项目实战
前端·c++·后端·mysql·搜索引擎·项目实战·boost
山青花欲燃31016 分钟前
React 对接流式接口实现
前端·llm
LaoZhangAI18 分钟前
【2025最新】Gemini 2.5 Pro完全指南:强大推理能力提升8大应用场景实战效率
前端
平山25 分钟前
浅析JavaScript的内存机制
javascript·面试
frontDeveloper27 分钟前
JavaScript基础知识概览(非DOM-API部分)
javascript
晓风伴月28 分钟前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
Carlos_sam28 分钟前
OpenLayers:海量图形渲染之矢量切片
前端·javascript
Nexmoe30 分钟前
20 万行代码:我们如何构建和维护大规模 AI 原型系统
前端