Работа с localStorage и API

Рейтинг: 0Ответов: 1Опубликовано: 10.08.2023

Есть задание: Необходимо получить список всех пользователей с помощью бесплатного API (https://jsonplaceholder.typicode.com/users) и отобразить их на странице. Пользователь должен иметь возможность удалить любого пользователя из списка. Данные при получении необходимо сохранить в локальное хранилище браузера localStorage. При удалении пользователь должен удаляться не только со страницы, но и из локального хранилища localStorage.

На данный момент смог отобразить нужные данные на странице, а так-же добавить кнопку удаления.

const getAsyncAwaitData = async (api) => {
    const res = await fetch(api);
    const json = await res.json();
    return json;
};

const api = 'https://jsonplaceholder.typicode.com/users';


try {
    const newData = await getAsyncAwaitData(api);
    console.log(newData);
    const pictureBoxEl = document.querySelector('.cards-box');
    newData.forEach((element) => {
        const picture = `
        <div class="card">
            <h3>Пользователь ${element.id}</h3>
            <p class="name">Имя: ${element.name}</p>
            <p class="username">Ник: ${element.username}</p>
            <p class="email">Email: ${element.email}</p>
            <button class="btn__del">Удалить пользователя</button>
        </div>
        `

        pictureBoxEl.insertAdjacentHTML("beforeend", picture)
    })
    const deleteBtn = document.querySelectorAll('.btn__del');
        deleteBtn.forEach((button) => {
            button.addEventListener('click', () => {
                const product = button.closest('.card');       
                product.remove();
            })
        })
} catch (error) {
    console.error('что-то пошло не так');
}

В свою очередь не могу понять, как именно реализовать сохранение данных из API в localStorage и привязать удаление к кнопке.

Знаю, что добавлять/удалять данные можно с помощью:

localStorage.setItem('login', '12345');
localStorage.removeItem('pas');

Но как сделать так, что-бы данные которые я получаю из API они сразу записывались в localStorage?

api javascript localstorage
Источник: Stack Overflow на русском

Ответы

▲ 1

При получении данных от АПИ, сразу сохраняем полученные значения в хранилище.
В div добавляем id, который соответствует id элемента(id пользователя) из полученного массива.
В обработчике кнопки, после удаления, добавляем сохранение заново данных в локальное хранилище, но уже массива, с исключенным удаленным элементом.

ВАЖНО! Если ключ id в массиве не строка, то в методе filter надо приветси его тип к строке.

const getAsyncAwaitData = async (api) => {
  const res = await fetch(api);
  const json = await res.json();
  localStorage.setItem('users', JSON.stringify(json)); // Сохраняем
  return json;
};

const api = 'https://jsonplaceholder.typicode.com/users';


try {
  const newData = await getAsyncAwaitData(api);
  console.log(newData);
  const pictureBoxEl = document.querySelector('.cards-box');
  newData.forEach((element) => {
    const picture = `
        <div class="card" id="${element.id}"><!-- Добавили ID -->
            <h3>Пользователь ${element.id}</h3>
            <p class="name">Имя: ${element.name}</p>
            <p class="username">Ник: ${element.username}</p>
            <p class="email">Email: ${element.email}</p>
            <button class="btn__del">Удалить пользователя</button>
        </div>
        `

    pictureBoxEl.insertAdjacentHTML("beforeend", picture)
  })
  const deleteBtn = document.querySelectorAll('.btn__del');
  deleteBtn.forEach((button) => {
    button.addEventListener('click', () => {
      const product = button.closest('.card');
      product.remove();
      // Отфильтровали массив
      const filterData = newData.filter(item => item.id !== product.id);
      localStorage.setItem('users', JSON.stringify(filterData)); // Сохранили
    })
  })
} catch (error) {
  console.error('что-то пошло не так');
}