当 React.js 中的 localStorage 发生任何变化时，如何立即更新状态

Question

当localStorage myCart数组发生任何变化时，如何立即更新购物车页面数据？下面是我的代码

const [cart, setCart] = React.useState([])

React.useEffect(() => {
    setCart(JSON.parse(localStorage.getItem('myCart')) || [])
}, [])

在cart被更新时，页面重新加载，但不是在新项目中添加或更新任何现有的项目！

我怎样才能做到这一点，cart如果对“localStorage”进行任何更改，它会立即更新？

提前致谢。

Answer 1

您可以向事件添加事件侦听器localstorage

React.useEffect(() => {
    
window.addEventListener('storage', () => {
  // When local storage changes, dump the list to
  // the console.
   setCart(JSON.parse(localStorage.getItem('myCart')) || [])   
});

   
}, [])

Window 接口的 storage 事件在存储区域（localStorage）被修改时触发。 storage 事件仅在非自身的窗口进行更改时触发。

.