【React】如何监听LocalStorage的变化

田本初2024-07-02 14:12

在代码中遇到了需要在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)