如何通过本地存储将多个React产品添加到购物车？

import React from "react";

const Cart = () => {
  // 从本地存储中获取购物车内容
  const cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];

  return (
    <div>
      <h2>购物车</h2>
      {cartItems.length > 0 ? (
        <ul>
          {cartItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>购物车为空</p>
      )}
    </div>
  );
};

export default Cart;

import React from "react";

const Product = ({ name }) => {
  const handleAddToCart = () => {
    // 从本地存储中获取购物车内容
    const cartItems = JSON.parse(localStorage.getItem("cartItems")) || [];

    // 将当前产品添加到购物车
    cartItems.push(name);

    // 将更新后的购物车内容保存到本地存储
    localStorage.setItem("cartItems", JSON.stringify(cartItems));
  };

  return (
    <div>
      <h3>{name}</h3>
      <button onClick={handleAddToCart}>添加到购物车</button>
    </div>
  );
};

export default Product;