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

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

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

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

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

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

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

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

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

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

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, заповнюємо його інформацією про тур та додаємо у список.

localStorage.setItem("user", JSON.stringify({name: "Marta"}));
const user = JSON.parse(localStorage.getItem("user"));

localStorage.setItem("user", JSON.stringify({name: "Marta"}));

const user = JSON.parse(localStorage.getItem("user"));

​

​

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

window.onload = displayTours;

window.onload = displayTours;

​

Де:

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

Порівняння localStorage, sessionStorage та cookies

Окрім localStorage є ще подібні сховища про які варто загадати, часто їх порівнюють тому нижче табличка з порівняннм:

Властивість	localStorage	sessionStorage	cookies
Обсяг	~5MB	~5MB	~4KB
Термін зберігання	Безстроково	До закриття вкладки	Встановлюється вручну
Відправляється на сервер	Ні	Ні	Так
Серіалізація	Так (рядки)	Так (рядки)	Так (рядки)
Доступ з JavaScript	Так	Так	Так

Обмеження localStorage

• Обсяг: до 5MB, може бути менше на мобільних.
• Формат: зберігає лише рядки. Якщо хочеш зберегти об’єкт — треба робити:

localStorage.setItem("user", JSON.stringify({name: "Marta"}));
const user = JSON.parse(localStorage.getItem("user"));

localStorage.setItem("user", JSON.stringify({name: "Marta"}));

const user = JSON.parse(localStorage.getItem("user"));

​

• Безпека: доступний усьому JavaScript-коду на сторінці — не можна зберігати паролі, токени тощо.

Обробка винятків та перевірка підтримки

localStorage.setItem("user", JSON.stringify({name: "Marta"}));
const user = JSON.parse(localStorage.getItem("user"));

localStorage.setItem("user", JSON.stringify({name: "Marta"}));

const user = JSON.parse(localStorage.getItem("user"));

​

Браузери в режимі “інкогніто” або при переповненні сховища можуть кидати помилки — це варто враховувати.

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