Хранение данных в браузере

JavaScript в браузере умеет не только рисовать на экране — он также может сохранять данные прямо в браузере пользователя. Это позволяет запоминать настройки, кэшировать результаты запросов, сохранять черновики форм и многое другое без всякого сервера.

localStorage

localStorage — самый простой и популярный способ хранения данных в браузере. Данные сохраняются без ограничения по времени: даже если пользователь закроет вкладку, перезагрузит страницу или перезапустит браузер — данные останутся на месте.

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

// Сохранить значение
localStorage.setItem('city', 'Санкт-Петербург');

// Прочитать значение
const city = localStorage.getItem('city');
console.log(city); // 'Санкт-Петербург'

// Удалить одну запись
localStorage.removeItem('city');

// Очистить всё хранилище
localStorage.clear();
js

Ключи и значения — всегда строки. Если нужно сохранить объект или массив, преобразуйте их через JSON.stringify, а при чтении — через JSON.parse:

const filters = { category: 'museum', sort: 'rating' };

// Сохраняем объект
localStorage.setItem('filters', JSON.stringify(filters));

// Читаем обратно
const saved = JSON.parse(localStorage.getItem('filters'));
console.log(saved.category); // 'museum'
js

Если ключа не существует, getItem вернёт null — это стоит проверять:

const raw = localStorage.getItem('filters');
const filters = raw ? JSON.parse(raw) : null;
js

Практичный пример — тема оформления

const themeToggle = document.querySelector('#theme-toggle');

// Применяем сохранённую тему при загрузке
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  document.body.classList.add('dark');
}

// Переключаем и сохраняем
themeToggle.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  const current = document.body.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem('theme', current);
});
js

Практичный пример — черновик формы

Чтобы пользователь не терял набранный текст при случайной перезагрузке:

const messageInput = document.querySelector('#message');

// Восстанавливаем черновик
messageInput.value = localStorage.getItem('message-draft') || '';

// Сохраняем при каждом изменении
messageInput.addEventListener('input', () => {
  localStorage.setItem('message-draft', messageInput.value);
});

// Очищаем после успешной отправки
form.addEventListener('submit', () => {
  localStorage.removeItem('message-draft');
});
js

sessionStorage

sessionStorage работает точно так же, как localStorage — те же четыре метода, тот же API. Разница одна: данные живут только в рамках одной вкладки и одной сессии. Закрыл вкладку — данные удалились.

sessionStorage.setItem('step', '2');
const step = sessionStorage.getItem('step');
js

Типичный кейс для sessionStorage — многошаговые формы, где нужно временно запомнить данные предыдущих шагов, но после завершения они больше не нужны.

localStorage против sessionStorage

Ограничения

Оба хранилища имеют лимит — обычно около 5 МБ на домен. Для текста и небольших объектов этого более чем достаточно, но хранить изображения или большие файлы не получится.

Ещё одно ограничение: хранилище доступно только из JavaScript на том же домене. Данные с example.com недоступны со страниц other.com — это сделано из соображений безопасности.

И важное правило: не храните в localStorage чувствительные данные — пароли, токены, персональные данные. Любой JavaScript на странице имеет к нему доступ, поэтому при XSS-атаке эти данные окажутся у злоумышленника.

IndexedDB — когда нужно больше

Если нужно хранить большие объёмы данных, работать с бинарными файлами или делать сложные запросы — существует IndexedDB. Это полноценная база данных прямо в браузере: поддерживает индексы, транзакции и объёмы до сотен мегабайт.

Минус — API IndexedDB довольно громоздкий. На практике для работы с ним используют библиотеки-обёртки, например idb, которая делает его удобным и современным.

В большинстве задач хватает localStorage. IndexedDB нужен только для по-настоящему сложных случаев — например, офлайн-приложений, которые хранят данные локально и синхронизируются с сервером при появлении сети.

В следующем уроке посмотрим, как загружать данные с сервера через fetch и сразу строить из них HTML-элементы на странице.