在代码中遇到了需要在react中监听localStorage的数据，下意识想到的是按照useEffect监听useState变化那一套，但是未生效。

代码如下：

useEffect(()=>{console.log("变化了")
},[localStorage.getItem('data')])

需要使用监听器

useEffect(() => {function checkData() {const item = localStorage.getItem('data')if (item) {setData(item)}}window.addEventListener('storage', checkData)return () => {window.removeEventListener('storage', checkData)}
}, [])

但是上述方式有弊端，只能监听同源的两个页面之间的 storage 变更，没法监听同一个页面的变更。

需要自定义事件

const originalSetItem = localStorage.setItem
localStorage.setItem = function (key, newValue) {const setItemEvent = new Event("setItemEvent")setItemEvent[key] = newValuewindow.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)