Javascript (localstorage) хранится только одно значение. Как я могу хранить все?

Question

Я получаю пользовательские данные из открытого API, я храню их в локальном хранилище, я могу отобразить все данные, но только первое значение сохраняется в локальном хранилище. Как я могу хранить все данные?

Мой код:

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);
   });

Результаты:

И здесь мы видим, что сохраняется только 1 значение вместо 10.

Answer 1

Вы переопределяете один и тот же объект каждый раз в локальном хранилище, поэтому в конце вашего map элемент локального хранилища myObj устанавливается на последний элемент из массива авторов.Я бы предложил использовать что-то уникальное, например, email пользователя, и установить это в локальном хранилище.

  localStorage.setItem(author.email , myObj_serialized);

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

Answer 2

Поскольку вы храните данные внутри функции map, вы перезаписываете ключ объекта myObj для каждой итерации цикла.

вы можете заметить, что только последний объект находится в LocalStorage.

Вместо этого следует хранить всю полезную нагрузку ответа

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);
  });

Answer 3

** Базовое понятие map () Методы: **

1. map () создает новый массив с результатами вызова функции для каждого элемента массива.
2. Этот методвызывает предоставленную функцию один раз для каждого элемента в массиве по порядку.
3. Элементы массива без значений не выполняются.
4. Исходный массив не изменяется.

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/> " ;

     

    })

ИЛИ

let myObj_serialized = JSON.stringify(myObj);

          localStorage.setItem(myObj.phone , myObj_serialized);

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

ИЛИ

  let myObj_serialized = JSON.stringify(myObj);

          localStorage.setItem(myObj.email , myObj_serialized);

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

Answer 4

Местное хранилище - это карта.Поэтому, вызывая setItem(key, value), вы переопределяете значение.Вы можете использовать несколько ключей или создать массив и сохранить весь массив.