localStorage()

mowh
Javascript

Salut !

J'ai un problème, vous allez voir :

Mon code

Je veux récupérer des données json distantes et les mettre dans un localstorage pour limiter le nombre de requetes http :

let data = {    // distant
  'nom': 'Malo'
}

let api = JSON.parse(localStorage.getItem('localdata'));

console.log('Vérification de la valeur de api...');
if (api == null) {
  console.log('api est NULL : envoi d\'une requete...');
  $.getJSON(data, (jsondata) => {
    console.log('Placement des donnes distantes dans le stockage local');
    localStorage.setItem('mowhdata',JSON.stringify(jsondata));
    console.log('Données stockées');
  });
  console.log('Récupération des données du  stockage local...');
  api = JSON.parse(localStorage.getItem('localdata'));
  console.log('Données récupérées');
}
console.log('OK !');

console.log('api.nom');

Ce que j'attends dans la console

> Vérification de la valeur de api...
> api est NULL : envoi d'une requete...
> Placement des donnes distantes de dans le stockage local
> Données stockées
> Récupération des données du  stockage local...
> Données récupérées
> OK !

Ce que j'obtiens

> Vérification de la valeur de api...
> api est NULL : envoi d'une requete a behance...
> Récupération des données du  stockage local...
> Données récupérées
> OK !
> TypeError: api is null
> Placement des donnes de behance dans le stockage local
> Données stockées

Ce que j'en déduis

La réponse du serveur distant met un moment à parvenir, ainsi le script continue sans les données JSON et quand api est réassignée, elle prend la valeur d'un localStorage vide... Que faire ?

Merci d'avance,

Malo

3 réponses

Lartak
Réponse acceptée

Bonjour.
Tu fais un getItem sur localdata alors que tu fais un setItem sur mowhdata c'est donc plutôt logique.
Et puis, si tu veux être certain d'avoir reçu les données avant de les écrire, fais plutôt quelque chose comme :

$.ajax({
    url: url_serveur_distant,
    method: 'GET',
    dataType: 'JSON'
}).done(function (jsondata) {
    localStorage.setItem('localdata', JSON.stringify(jsondata));
    // ...
}).fail(function(reason) {
    console.error(reason);
});
Defy

apres le localstorage c´est pas une db pour stocker plein de data, pour du vrai cache il faut passer par des services worker

lien tuto

mowh
Auteur

Je regarde ça, merci !