Javascript 使用localStorage保存数据-React.js

我不知道如何使用localStorage来持久化调用API得到的数据。 我希望每当我刷新页面时，useffect中的callApi都不会呈现新数据，并保持现有数据不变

任何帮助都将不胜感激

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Layout, Loading, OverviewHeader, OverviewSubHeader, SiteCard } from '../components';

const Overview = () => {
    const [loading, setLoading] = useState(true);
    const [sites, setSites] = useState([]);

    useEffect(() => {
        async function callApi() {
            const response = await axios.get(`https://randomuser.me/api/?results=3`);
            const sites = response?.data?.results;
            console.log('sites', sites);
            setSites(sites);

            await localStorage.setItem('sites', JSON.stringify(sites));
            setLoading(false);
        }
        callApi();
    }, []); 

    return (
        <div>
            <Layout>
                <OverviewHeader />
                <OverviewSubHeader />
                <div className='overview-page-wrapper'>
                    {loading ? (
                        <Loading />
                    ) : (
                        sites.map(site => {
                            return (
                                <React.Fragment>
                                    <SiteCard
                                        key={site.login.uuid}
                                        siteId={site.login.uuid}
                                        image={site.picture.large}
                                        firstName={site.name.first}
                                        lastName={site.name.last}
                                        city={site.location.city}
                                        country={site.location.country}
                                        sensors={site.dob.age}
                                        notifications={site.registered.age}
                                        latitude={site.location.coordinates.latitude}
                                        longitude={site.location.coordinates.longitude}
                                        {...site}
                                    />
                                </React.Fragment>
                            );
                        })
                    )}
                </div>
            </Layout>
        </div>
    );
};

export default Overview;

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
从“../components”导入{Layout，Loading，OverviewHeader，OverviewSubHeader，SiteCard}；
常量概览=（）=>{
const[loading，setLoading]=useState（true）；
const[sites，setSites]=useState（[]）；
useffect（（）=>{
异步函数callApi（）{
const response=等待axios.get(`https://randomuser.me/api/?results=3`);
const sites=响应？数据？结果；
console.log（“站点”，站点）；
设置站点（站点）；
等待localStorage.setItem（'sites'，JSON.stringify（sites））；
设置加载（假）；
}
callApi（）；
}, []); 
返回(
{加载(
) : (
sites.map（site=>{
返回(
);
})
)}
);
};
导出默认概述；

为此目的使用useContext钩子，或者如果您真的只想使用本地存储，则使用它，但要为此管理不同的状态/变量

当前状态（要在屏幕上渲染的状态）

获取的数据（要保留的数据）

---

希望这是有意义的。谢谢

我不太确定您想要完成什么，因为您可能希望在某个时候刷新这些数据。 也许你可以指出你想要迎合什么样的行为/场景

在任何情况下，为了回答您的问题，您可以做的是：

const[displayedSites，setDisplayedSites]=useState（[]）
//这会同时设置UI的状态
//和存储到本地存储
const setAndSaveDisplayedSites=（fetchedSites）=>{
setDisplayedSites（站点）
localStorage.setItem（'sites'，JSON.stringify（sites））
}
useffect（（）=>{
（异步函数（）{
const localSites=localStorage.getItem（站点）；
如果（！localSites）{
//只有在您第一次安装此组件时，才会获取此文件
//我想您需要调用setAndSaveDisplayedSites
//从“刷新”按钮
const fetchedSites=await getSitesFromAPI（）
setAndSaveDisplayedSites（fetchedSites）
返回
}
const parsedLocalSites=JSON.parse（本地站点）
setDisplayedSites（解析的本地站点）
})()
}, [])

还可以签出这个为您处理一些事情的钩子：

，您可以点击这个链接，他们已经用localstorageis

解释了CRUD，如果（！localStorage.getItem（'sites'））callApi（）

您在找什么？