Локальне сховище JavaScript

В процесі навчання JavaScript я вирішила зробити маленький пет проект (лендінг) для кращого зрозуміння матеріалу. Одним з елементів на сторінці є форма для додавання туру в базу даних, так як бази даних в мене немає, і в процесі дебагінгу щоразу заповнювати всі обовязкові поля туру просто не хочеться, мені ментор порадив використовувати локальне сховище браузера – Local Storage.

localStorage зручний для оптимізації процесу розробки веь сторінок. В нашому випадку, при створенні форми додавання туру, тому що при перезавантаженні сторінки дані нікуди не пропадуть, а будуть збережені.

Сам процес додавання даних в локальне сховище складається з декількох етапів:

localStorage.setItem('ключ', 'значення');

localStorage.getItem('ключ');

localStorage.removeItem('ключ');

localStorage.setItem(key, value);

Збереження даних

function saveTour(tour) {
  const tours = JSON.parse(localStorage.getItem('tours')) || [];
  tours.push(tour);
  localStorage.setItem('tours', JSON.stringify(tours));
}

Де:

• Витягуємо існуючі тури з localStorage, або створюємо пустий масив, якщо даних немає.
• Додаємо новий тур до масиву.
• Зберігаємо оновлений масив назад у localStorage у форматі JSON.

Відображення раніше збережених даних

function displayTours() {
  tourList.innerHTML = '';
  const tours = JSON.parse(localStorage.getItem('tours')) || [];
  const tourWrap = document.createElement('div');
  tourWrap.classList.add('w3-row-padding', 'w3-padding-32', 'accordion-content');

  tours.forEach((tour, index) => {
    const tourDiv = document.createElement('div');
    tourDiv.classList.add('w3-third', 'w3-margin-bottom');
    tourDiv.innerHTML = `
      <img src="${tour.image}" alt="Tour Image" style="width:100%; height:200px; object-fit:cover;">
      <div class="w3-container w3-white">
      <h3><b>${tour.city}</b></h3>
      <p class="w3-opacity">${tour.date}</p>
      <p>${tour.description}</p>
      <button onclick="deleteTour(${index})" class="w3-button w3-red">Delete</button></div>
    `;
    tourList.appendChild(tourDiv);
  });
}

Де:

• Очищаємо список турів.
• Отримуємо тури з localStorage.
• Створюємо обгортку для турів.
• Для кожного туру створюємо div, заповнюємо його інформацією про тур та додаємо у список.

Відображення турів при завантаженні сторінки:

window.onload = displayTours;

Де:

• Викликаємо displayTours при завантаженні сторінки, щоб показати раніше збережені тури.

Видалення раніше збережених даних

function deleteTour(index) {
  const tours = JSON.parse(localStorage.getItem('tours')) || [];
  tours.splice(index, 1);
  localStorage.setItem('tours', JSON.stringify(tours));
  displayTours();
}

Де:

• Витягуємо тури з localStorage.
• Видаляємо тур за індексом.
• Зберігаємо оновлений список у localStorage.
• Оновлюємо відображення турів.

Повний HTML CSS JS код для форми додавання турів можна протестити на Codepen

See the Pen Local Storage Example by Victoriia Hladka (@vikagladka) on CodePen.