每次如何getItem，值为changed/updated。本地存储，JS

Question

我有一个购物车，我可以在其中添加和删除商品，并将数据保存在 localStorage。

我这样添加我的项目：

const addItemToCart = (item: Object) => {
    if (typeof window === 'undefined') return;

    let myCart = JSON.parse(localStorage.getItem('myCart') || '[]');
    myCart.push(item);
    localStorage.setItem('myCart', JSON.stringify(myCart));
  };

购物车是不同的组件，每次我将商品添加到购物车时都需要调用那个组件getItem()。

有没有办法在 localStorage 中查看属性？因为我看到的唯一方法是创建一些上下文。

Answer 1

localStorage 没有任何状态，所以你必须创建自己的带有状态的变量，这样每次更新 localStorage 时，你也会更新状态变量：

const [cart, setCart] = useState([])
const addItemToCart = (item: Object) => {
    if (typeof window === 'undefined') return;

    let myCart = JSON.parse(localStorage.getItem('myCart') || '[]');
    myCart.push(item);
    // As you update localStorage, update the state as well
    localStorage.setItem('myCart', JSON.stringify(myCart));
    // Update the state with the array
    setCart(myCart)
};

Answer 2

您可以创建带有侦听器的自定义事件以影响状态更改。

在 adding/removing 项 (setItem) 之后，您可以触发自定义事件：

...
// As you update localStorage, update the state as well
localStorage.setItem('myCart', JSON.stringify(myCart));

// fired custom event on localStorage data changed
const event = new CustomEvent('localdatachanged');
document.dispatchEvent(event);

// Update the state with the array
...

并在您想要的位置添加事件侦听器：

document.addEventListener('localdatachanged', () => {
  // handler
});

在这种情况下，您可以在不同的地方触发自定义事件，但只能在一个地方处理更改。

每次如何getItem，值为changed/updated。本地存储，JS

How to getItem every time, value is changed/updated. localStorage, JS

javascript

local-storage

reactjs