使用localStorage将商品添加到reactjs中的购物车

使用localStorage将商品添加到React中的购物车可以通过以下步骤实现：

首先，需要在React组件中创建一个购物车组件，用于展示添加的商品列表。
在购物车组件中，使用localStorage来存储商品信息。localStorage是浏览器提供的一种存储数据的机制，可以将数据存储在本地。
当用户点击添加到购物车按钮时，将商品信息以JSON格式存储到localStorage中。可以使用localStorage.setItem(key, value)方法将数据存储到localStorage中，其中key可以是任意字符串，value必须是字符串类型。
在购物车组件中，使用localStorage.getItem(key)方法来获取存储在localStorage中的商品信息。这样就可以将存储在localStorage中的商品信息展示在购物车组件中。
如果用户想要删除购物车中的某个商品，可以使用localStorage.removeItem(key)方法将商品从localStorage中移除。

以下是一个简单的代码示例：

import React, { useState } from 'react';

const ShoppingCart = () => {
  const [items, setItems] = useState([]);

  // 添加商品到购物车
  const addToCart = (product) => {
    const cartItems = localStorage.getItem('cartItems')
      ? JSON.parse(localStorage.getItem('cartItems'))
      : [];
    cartItems.push(product);
    localStorage.setItem('cartItems', JSON.stringify(cartItems));
    setItems(cartItems);
  };

  // 从购物车中移除商品
  const removeFromCart = (product) => {
    const cartItems = JSON.parse(localStorage.getItem('cartItems'));
    const updatedItems = cartItems.filter((item) => item.id !== product.id);
    localStorage.setItem('cartItems', JSON.stringify(updatedItems));
    setItems(updatedItems);
  };

  // 获取购物车中的商品列表
  const getCartItems = () => {
    const cartItems = JSON.parse(localStorage.getItem('cartItems'));
    setItems(cartItems);
  };

  return (
    <div>
      <h2>购物车</h2>
      <button onClick={getCartItems}>获取购物车商品</button>
      {items && items.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <button onClick={() => removeFromCart(item)}>删除</button>
        </div>
      ))}
    </div>
  );
};

export default ShoppingCart;

在上述代码中，我们使用了React的useState钩子来管理购物车中的商品列表。addToCart函数用于将商品添加到购物车，removeFromCart函数用于从购物车中移除商品，getCartItems函数用于获取购物车中的商品列表。

注意：以上代码仅仅是一个示例，实际开发中可能还需要考虑其他因素，例如商品数量、商品价格等。此外，还需要注意localStorage的容量限制和数据格式转换等问题。