localStorage: сохранить настройку или строку

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

• темы (light/dark)
• выбранного языка
• фильтра, сортировки, состояния UI
• сохранения строки (например, черновика)

Важно: localStorage хранит только строки.

1) Базовые операции: setItem и getItem

Запись значения:

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

Чтение значения:

const theme = localStorage.getItem("theme");
console.log(theme); // "dark" или null

Если ключа нет, getItem вернет null.

2) Удаление и очистка

Удаление одного ключа:

localStorage.removeItem("theme");

Очистка всего хранилища домена:

localStorage.clear();

clear() обычно используют редко, потому что он удаляет все ключи, не только связанные с конкретной задачей.

3) Пример: сохранить и восстановить настройку (строка)

Допустим, есть класс на body, который отвечает за тему.

const savedTheme = localStorage.getItem("theme");

if (savedTheme) {
  document.body.dataset.theme = savedTheme;
}

Переключение и сохранение:

function setTheme(theme) {
  document.body.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

setTheme("dark");

4) localStorage всегда хранит строки

Это частая причина ошибок.

localStorage.setItem("count", 10);

const value = localStorage.getItem("count");
console.log(typeof value); // "string"
console.log(value);        // "10"

Если нужно число:

const value = localStorage.getItem("count");
const count = Number(value);
console.log(count);

Если нужно boolean:

localStorage.setItem("isOpen", "true");

const isOpen = localStorage.getItem("isOpen") === "true";
console.log(isOpen);

5) Сохранение объекта или массива через JSON

Для сложных данных используют JSON.stringify при записи и JSON.parse при чтении.

Запись:

const settings = { theme: "dark", pageSize: 20 };
localStorage.setItem("settings", JSON.stringify(settings));

Чтение:

const raw = localStorage.getItem("settings");

const settings = raw ? JSON.parse(raw) : null;
console.log(settings);

6) Безопасное чтение JSON: защита от битых данных

Иногда в localStorage лежит некорректная строка (например, старая версия или ручное изменение). Тогда JSON.parse бросит ошибку. Практично оборачивать в try/catch.

function loadJSON(key) {
  const raw = localStorage.getItem(key);
  if (!raw) return null;

  try {
    return JSON.parse(raw);
  } catch (e) {
    return null;
  }
}

const settings = loadJSON("settings");
console.log(settings);

7) Полезное правило: префикс ключей

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

localStorage.setItem("learnjs:theme", "dark");
localStorage.setItem("learnjs:draft", "text...");

8) Ограничения и нюансы

• localStorage доступен только в браузере, на сервере его нет
• объем ограничен (зависит от браузера, но подходит для настроек и небольших данных)
• хранить пароли и секреты в localStorage не стоит

Частые ошибки

1) Сравнение с числом без преобразования

localStorage.setItem("count", "2");

const count = localStorage.getItem("count");
console.log(count > 10);

Здесь count - строка. Лучше:

const count = Number(localStorage.getItem("count"));
console.log(count > 10);

2) Забыть, что getItem возвращает null

const theme = localStorage.getItem("theme");
console.log(theme.toUpperCase());

Если theme отсутствует, будет ошибка. Нужна проверка:

const theme = localStorage.getItem("theme");

if (theme) {
  console.log(theme.toUpperCase());
}

3) JSON.parse без обработки ошибок

Если строка невалидна, будет исключение. Практично использовать try/catch, как в примере выше.

Что стоит запомнить

• localStorage хранит данные между перезагрузками страницы.
• Значения хранятся только строками.
• Для объектов и массивов используется JSON.stringify/JSON.parse.
• getItem возвращает null, если ключа нет.
• Для стабильности при чтении JSON полезен try/catch.