How to store specific API data in local storage and show those data to another page in ReactJs?

Question

I have a page called "Content" where I fetch all the data from an API and put only "name" and "bio" in a cart, in each cart I have a button called "Favourite" . When the user clicks the button only cart data (in my case it's "name" and "bio" ) will store in LocalStorage.

So my first question is how I can store those specific data in local storage?

And in the "Fav-Content" page I want to fetch the local storage data that the user stored by clicking the "Favourite" button.

So my second question is how I can fetch and show those local storage data on another page?

Here is my approach:

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;

Answer 1

I changed your code fragment and added get and set item functions to local storage.

import React, { useState, useEffect } from 'react';
import Card from 'react-bootstrap/Card';

const Posts = ({ posts, loading }) => {
// I dont think you need this state since yo uare not using it in this component
const [items, setItems] = useState([]);

const click = (name) => {
    const item = posts.find((post) => post.name === name);
    const localStorageItems = JSON.parse(localStorage.getItem('items')) || [].
    localStorage.setItem('items', JSON.stringify([...localStorageItems, item]))
};

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(item.name)}>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;

If you want to use items in annother page you should do localStorage.getItem('items') and parse it.