使用localStorage的索引签名

Question

我有一辆可以携带多种物品的手推车。购物车及其项目必须存储在localStorage中。

我决定在索引签名中对导致以下代码的购物车项目使用TypeScript：

export class Cart {
  public items: { [id: string]: CartItem };

  public constructor() {
    this.items = {};
  }
}

如何在localStorage中保存这样的购物车？

我试过这个：

这是一个使用反应-使用的自定义钩子

export function useCart(initialCart?: Cart | undefined): IUseCart {
  const [cart, setCart, removeCart] = useLocalStorage<Cart>(
    "your-cart",
    initialCart ?? new Cart(),
    {
      raw: false,
      serializer: stringify,
      deserializer: (storageValue: string) =>
        parse(storageValue, {
          allowDate: true,
          allowFunction: false,
          allowRegExp: false,
          allowClass: false,
          allowUndefined: false,
          allowSymbol: false,
        }),
    }
  );

我正在使用useCart的setCart函数，如下所示：

setCart(cart)
console.log(cart.items) // [{ id: 1, ean: 123}]

这使得一个名为“your”的本地存储条目的项看起来像一个列表，其中包含一个元素(这很好) [{ id: 1, ean: 123}]，但是每当setCart(cart)被用不同的项再次调用时，它就会覆盖现有的条目，以便本地存储“your”仍然有一个项：[{ id: 2, ean: 234}]。

Answer 1

与使用setCart不同，您需要创建一个新方法，该方法可以更新项目，而不是覆盖现有的购物车。

您可以通过以下方式来实现这一点：

export function useCart(initialCart?: Cart | undefined): IUseCart {
  const [cart, setCart, removeCart] = useLocalStorage<Basket>(
    "your-cart",
    initialCart ?? new Cart(),
    {
      raw: false,
      serializer: stringify,
      deserializer: (storageValue: string) =>
        parse(storageValue, {
          allowDate: true,
          allowFunction: false,
          allowRegExp: false,
          allowClass: false,
          allowUndefined: false,
          allowSymbol: false,
        }),
    }
  );
  const addToCart = (newCart) => {
    const updatedCart = new Cart();
    updatedCart.items = { ...cart.items, ...newCart.items};
    setCart(updatedCart);
  };

现在您可以使用这个addToCart方法，它在设置购物车之前追加项，而不是直接调用setCart方法。