Tengo una página llamada "Contenido" donde obtengo todos los datos de una API y pongo solo "nombre" y "biografía" en un carrito, en cada carrito tengo un botón llamado "Favourite" . Cuando el usuario hace clic en el botón, solo los datos del carrito (en mi caso, es "nombre" y "biografía" ) se almacenarán en LocalStorage.

Entonces, mi primera pregunta es cómo puedo almacenar esos datos específicos en el almacenamiento local.

Y en la página "Contenido favorito" quiero obtener los datos de almacenamiento local que el usuario almacenó al hacer clic en el botón "Favourite" .

Entonces, mi segunda pregunta es cómo puedo obtener y mostrar esos datos de almacenamiento local en otra página.

Aquí está mi enfoque:

 import React, { useState, useEffect } from 'react'; import Card from 'react-bootstrap/Card'; const Posts = ({ posts, loading }) => { const [items, setItems] = useState([]); const click = () => { localStorage.setItem('items', JSON.stringify(items)); }; if (loading) { return <h2>Loading...</h2>; } return ( <div className="fav-content"> <ul className="card"> {posts.map((item, index) => { return ( <li key={index}> <Card style={{ width: '18rem' }}> <button onClick={click}>Add Favt</button> <Card.Body> <Card.Title>Name: {item.name}</Card.Title> <Card.Text>Bio: {item.bio}</Card.Text> </Card.Body> </Card> </li> ); })} </ul> </div> ); }; export default Posts;