0
votes

Comment puis-je utiliser localStorage sur mon application de réaction?

Je récupère des données d'une API, j'aimerais utiliser localStorage pendant une heure, j'ai besoin d'aller chercher des données après chaque heure.


1 commentaires

Au lieu de stockage local, vous pouvez envisager la mise en cache du client pendant 1 heure.


3 Réponses :


2
votes

Tout ce dont vous avez besoin est d'enregistrer les données nécessaires avec un horodatage. Et vérifiez si la date a été expirée.

loadData = () => {
    // Check whether data exists in localStorage and has been
    // saved less than an hour ago
    const data = JSON.parse(localStorage.getItem('brand'));
    if (data && (new Date().getTime() - data.created <= 3600)) {
        this.setState({
            note: data.brand.note,
            logo: data.brand.logo,
            name: data.brand.name,
        });

        return;
    }

    // Otherwise perform request
    axios.get('https://myAPI.url').then(res => {
        const brand = res.data;

        // and save data in local storage with the current timestamp
        localStorage.setItem(
            'brand',
            JSON.stringify({
                created: new Date().getTime(),
                brand,
            }),
        );

        this.setState({
            note: brand.note,
            logo: brand.logo,
            name: brand.name,
        });
    });
};


0 commentaires

0
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


0 commentaires

0
votes

Au lieu de sauver ces articles à votre localStorage, je recommande de les stocker dans le magasin Redux. Si vous n'utilisez pas ReDux: https://react-redux.js.org/ Introduction / démarrage rapide


0 commentaires