【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)
相关推荐
谢小飞9 分钟前
Echarts高级柱状图开发:渐变与3D效果实现
前端·echarts
FogLetter12 分钟前
Vite vs Webpack:前端构建工具的双雄对决
前端·面试·vite
tianchang14 分钟前
JS 排序神器 sort 的正确打开方式
前端·javascript·算法
怪可爱的地球人17 分钟前
ts的类型兼容性
前端
方圆fy24 分钟前
探秘Object.prototype.toString(): 揭开 JavaScript 深层数据类型的神秘面纱
前端
FliPPeDround27 分钟前
🚀 定义即路由:definePage宏如何让uni-app路由配置原地起飞?
前端·vue.js·uni-app
怪可爱的地球人28 分钟前
ts的类型推论
前端
林太白35 分钟前
动态角色权限和动态权限到底API是怎么做的你懂了吗
前端·后端·node.js
每一天,每一步39 分钟前
React页面使用ant design Spin加载遮罩指示符自定义成进度条的形式
前端·react.js·前端框架
moyu841 小时前
Pinia 状态管理:现代 Vue 应用的优雅解决方案
前端