JavaScript · браузер

localStorage: данные между посещениями

localStorage хранит небольшие данные в браузере. Они остаются после перезагрузки страницы и повторного открытия сайта. Это удобно для выбранной темы, настроек интерфейса или черновика формы.

Запись и чтение

Данные сохраняются как пары «ключ — значение». Оба значения в хранилище становятся строками.

localStorage.setItem('theme', 'dark');

const theme = localStorage.getItem('theme');
console.log(theme); // dark

Если ключа нет, getItem() возвращает null. Это стоит учитывать до использования результата.

const savedTheme = localStorage.getItem('theme');
const theme = savedTheme ?? 'light';

Удаление данных

removeItem() удаляет один ключ, а clear() очищает всё хранилище текущего сайта. Обычно безопаснее удалять конкретное значение.

localStorage.removeItem('theme');
// localStorage.clear(); — удалит все ключи сайта

Массивы и объекты

Объект нельзя положить в хранилище напрямую: получится строка [object Object]. Перед записью преобразуй данные через JSON.stringify(), а после чтения восстанови их с помощью JSON.parse().

const settings = { theme: 'dark', compact: true };

localStorage.setItem('settings', JSON.stringify(settings));

const raw = localStorage.getItem('settings');
const savedSettings = raw ? JSON.parse(raw) : null;

Сохраняем тему интерфейса

const button = document.querySelector('.theme-button');
const savedTheme = localStorage.getItem('theme') ?? 'light';

document.body.dataset.theme = savedTheme;

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

  document.body.dataset.theme = nextTheme;
  localStorage.setItem('theme', nextTheme);
});

Что важно помнить

• Хранилище привязано к конкретному домену и протоколу.
• Все значения являются строками.
• Пользователь может очистить данные в настройках браузера.
• Методы работают синхронно, поэтому хранилище не подходит для больших объёмов.
• В приватном режиме поведение и доступный объём могут отличаться.

Там лежат только строки и только в этом браузере

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

Ключ — это имя полки. Бери одно имя с префиксом проекта: praktum.theme, praktum.checklist. Случайные ключи data и items потом столкнутся с другим скриптом на той же странице.

const KEY = "praktum.checklist";

function readItems() {
  try {
    const parsed = JSON.parse(localStorage.getItem(KEY) ?? "[]");
    return Array.isArray(parsed) ? parsed : [];
  } catch {
    return [];
  }
}

function writeItems(items) {
  localStorage.setItem(KEY, JSON.stringify(items));
}

Что туда класть, а что нет

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

Запись синхронная и небольшая. Не сохраняй весь журнал действий на каждый ввод символа, если из-за этого поле начинает подвисать. Для черновика обычно хватает сохранения на событие change или с небольшой паузой.

Восстановление после мусора

• Если ключа нет, getItem вернёт null. Подставь значение по умолчанию.
• Если там старая форма данных, не рисуй страницу наугад. Начни заново.
• removeItem удаляет один ключ, clear стирает всё хранилище этого сайта.
• Проверь режим инкогнито и запрет хранения: запись может бросить ошибку.

Связанные темы

Для интерфейса понадобятся события, поиск элементов и работа с объектами.