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.