LocalStorage и сохранение данных

Что если хочется сохранить тему оформления, список задач или настройки пользователя — и чтобы они не пропадали после закрытия вкладки? Для этого есть localStorage — хранилище данных прямо в браузере, без сервера.

💾 Что такое localStorage?

localStorage — это хранилище «ключ-значение» в браузере. Данные сохраняются навсегда (пока пользователь не очистит кеш или код не удалит их). Перезагрузка страницы, закрытие вкладки, перезапуск браузера — данные остаются.

🔧 Четыре метода localStorage

API localStorage очень простой — всего 4 метода:

// ЗАПИСАТЬ
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'ru');

// ПРОЧИТАТЬ
const theme = localStorage.getItem('theme'); // 'dark'
const missing = localStorage.getItem('nope'); // null (если нет ключа)

// УДАЛИТЬ один ключ
localStorage.removeItem('language');

// ОЧИСТИТЬ всё хранилище
localStorage.clear();

// Количество записей
console.log(localStorage.length); // число ключей

// Получить ключ по индексу
console.log(localStorage.key(0)); // имя первого ключа

📦 Хранение объектов через JSON

Чтобы хранить объекты или массивы — сериализуем через JSON.stringify при записи и десериализуем через JSON.parse при чтении:

// Сохраняем объект
const user = { name: 'Иван', age: 25, premium: true };
localStorage.setItem('user', JSON.stringify(user));

// Читаем объект
const saved = localStorage.getItem('user'); // строка JSON
const restoredUser = JSON.parse(saved);     // снова объект
console.log(restoredUser.name); // 'Иван'

// Сохраняем массив
const tasks = ['Купить продукты', 'Написать код', 'Сделать зарядку'];
localStorage.setItem('tasks', JSON.stringify(tasks));

// Читаем массив
const savedTasks = JSON.parse(localStorage.getItem('tasks'));
console.log(savedTasks.length); // 3

Безопасный паттерн чтения — с дефолтным значением:

function loadTasks() {
  try {
    const saved = localStorage.getItem('tasks');
    return saved ? JSON.parse(saved) : []; // если нет данных — пустой массив
  } catch (e) {
    return []; // если данные повреждены
  }
}

function saveTasks(tasks) {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

🕐 sessionStorage — данные до закрытия вкладки

sessionStorage — это то же самое, что localStorage, но данные живут только пока открыта вкладка. Закрыл вкладку — данные удалились. API идентичен localStorage:

// Всё то же самое, только данные — только до закрытия вкладки
sessionStorage.setItem('draft', 'Незаконченная статья...');
sessionStorage.getItem('draft');
sessionStorage.removeItem('draft');
sessionStorage.clear();

💻 Практика: сохранение темы

// Переключение тёмной/светлой темы с сохранением
const toggle = document.querySelector('#theme-toggle');

// Восстанавливаем тему при загрузке
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.dataset.theme = savedTheme;

toggle.addEventListener('click', () => {
  const current = document.body.dataset.theme;
  const next = current === 'light' ? 'dark' : 'light';

  document.body.dataset.theme = next;
  localStorage.setItem('theme', next); // сохраняем выбор

  toggle.textContent = next === 'dark' ? '☀️' : '🌙';
});

// При следующей загрузке страницы
// const savedTheme = localStorage.getItem('theme') || 'light';
// снова восстановит нужную тему

✅ Итоги урока

• localStorage.setItem(key, value) — сохранить строку
• localStorage.getItem(key) — прочитать (null если нет ключа)
• localStorage.removeItem(key) — удалить ключ
• localStorage.clear() — удалить всё хранилище
• localStorage хранит только строки — объекты сохраняй через JSON.stringify/parse
• Ограничение ~5 МБ на домен. Данные хранятся навсегда
• sessionStorage — то же API, но данные живут только до закрытия вкладки
• Никогда не храни пароли и токены в localStorage — они доступны через JS