2
votes

Javascript (localstorage) une seule valeur est stockée. Comment puis-je tout stocker?

J'obtiens des données utilisateur à partir d'une API ouverte, je les stocke dans le localstorage, je peux afficher toutes les données mais seule la première valeur est enregistrée dans le localstorage. Comment puis-je stocker toutes les données?

Mon code:

String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

function createNode(element) {
  return document.createElement(element);
}

function append(parent, element ) {
  return parent.appendChild(element);
}

const ul = document.getElementById('authors');
const url = 'https://randomuser.me/api/?results=10';

fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {

    let authors = data.results;

    return authors.map(function(author) {

      const myObj = {
        name: `${author.name.first}`,
        lastname : `${author.name.last}`,
        email : `${author.email}`,
        location : `${author.location.city}, ${author.location.street}`,
        phone : `${author.phone}`
      }

      let li = createNode('li'),
          img = createNode('img'),
          span = createNode('span');

      let myObj_serialized = JSON.stringify(myObj);

      localStorage.setItem("myObj" , myObj_serialized);

      let myObj_deserialized = JSON.parse(localStorage.getItem("myObj"));

      document.getElementById('authors').innerHTML += 
        myObj_deserialized.name.capitalize() +  " " + 
        myObj_deserialized.lastname.capitalize() + " --- " + 
        myObj_deserialized.email + " --- " + 
        myObj_deserialized.location.capitalize() + " --- " + 
        myObj_deserialized.phone + "<br/> " ;

      console.log(myObj);    
    })
  })

  .catch(function(error) {
     console.log(error);
   });

résultats:

Et ici, nous voyons qu'une seule valeur est stockée au lieu de 10.

javascript local-storage

1 commentaires

Utilisez simplement localStorage.setItems ('author', data.results) après l'appel d'API et supprimez les appels suivants à localStorage.setItem

4 Réponses :

4
votes

Pendant que vous stockez les données dans votre fonction map , vous écrasez la clé d'objet myObj pour chaque itération de boucle.

vous pouvez remarquer que seule la dernière L'objet est dans le LocalStorage.

Vous devriez stocker la charge utile de réponse entière à la place

const ul = document.getElementById('authors');
const url = 'https://randomuser.me/api/?results=10';
fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let authors = data.results;

    let myObj_serialized = JSON.stringify(authors);

    localStorage.setItem("myObj", myObj_serialized);

    // ... Everything else here
    // Now you should adapt your code.
  })
  .catch(function(error) {
    console.log(error);
  });

1 commentaires

Merci pour votre commentaire :) je l'ai compris

5
votes

Vous remplacez le même objet à chaque fois dans localstorage, donc à la fin de votre map l'élément localstorage myObj est défini sur le dernier élément du tableau auteurs . Je suggère d'utiliser quelque chose d'unique, comme l ' email de l'utilisateur, et de le définir dans le stockage local.

  localStorage.setItem(author.email , myObj_serialized);

  let myObj_deserialized = JSON.parse(localStorage.getItem(author.email));

1 commentaires

C'est ça. Je vous remercie !

1
votes

Localstorage est une carte. Donc, en appelant setItem (clé, valeur) vous remplacez la valeur. Vous pouvez soit utiliser plusieurs clés, soit créer un tableau et enregistrer le tableau entier.

1 commentaires

Merci pour votre commentaire :) je l'ai compris

1
votes

** Carte conceptuelle de base () Méthodes: **

map () crée un nouveau tableau avec les résultats de l'appel d'une fonction pour chaque élément du tableau.
Cette méthode appelle la fonction fournie une fois pour chaque élément d'un tableau dans l'ordre.
Les éléments de tableau sans valeurs ne s'exécutent pas.
Le tableau d'origine ne change pas.

  let myObj_serialized = JSON.stringify(myObj);

          localStorage.setItem(myObj.email , myObj_serialized);

          let myObj_deserialized = JSON.parse(localStorage.getItem(myObj.email));

let myObj_serialized = JSON.stringify(myObj);

          localStorage.setItem(myObj.phone , myObj_serialized);

          let myObj_deserialized = JSON.parse(localStorage.getItem(myObj.phone));

return authors.map(function(author,index, arr) {

      const myObj = {
        name: `${author.name.first}`,
        lastname : `${author.name.last}`,
        email : `${author.email}`,
        location : `${author.location.city}, ${author.location.street}`,
        phone : `${author.phone}`
      }

      let li = createNode('li'),
          img = createNode('img'),
          span = createNode('span');

          let myObj_serialized = JSON.stringify(myObj);

          localStorage.setItem(index , myObj_serialized);

          let myObj_deserialized = JSON.parse(localStorage.getItem(index));

          document.getElementById('authors').innerHTML += myObj_deserialized.name.capitalize() +  " " + myObj_deserialized.lastname.capitalize() + " --- " + myObj_deserialized.email + " --- " + myObj_deserialized.location.capitalize() + " --- " + myObj_deserialized.phone + "<br/> " ;

     

    })

0 commentaires