useEffect无法监听到localStorage中的数据变化

Question

 useEffect(() => {
   console.log("123");
  }, [localStorage.getItem("avatar")]);

用户修改头像之后，我想监听到localStorage中的数据变化。控制台看到localStorage中的数据确实是有改变的，但是这里没办法打印123，是怎么回事？

Answer 1

监听localStorage的改变是要使用事件来进行监听，useEffect中的第二个选项一般为依赖项，states变量。楼上给的链接中有正确的解决办法

useEffect(() => {
  function checkUsetData() {
    const item = localStorage.getItem('avatar')

    if (item) {
      console.log("123")
    }
  }

//绑定storage事件，监听storage变化
  window.addEventListener('storage', checkUsetData)
//清除副作用，删除storage监听事件
  return () => {
    window.removeEventListener('storage', checkUsetData)
  }
}, [])

个人建议：希望了解一下Storage的事件变化和useEffect的依赖绑定
有用的话，希望采纳一下