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.
Mon API ressemble à: p>
Voici mon code, https://codesandbox.io/s/busy -Cloud-QZMef P> LI>
ul> p>
3 Réponses :
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, }); }); };
<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>
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 p>
Au lieu de stockage local, vous pouvez envisager la mise en cache du client pendant 1 heure.