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