Настройки в localStorage: чтение, типы и ошибки записи

04.06.2026 Полезные материалы

Переключатель компактного вида рядом с абстрактной схемой локального хранения

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

Страница с восстановлением настройки

index.html

<!doctype html>
<html lang="ru"><meta charset="utf-8"><title>Настройка вида</title>
<label><input id="compact" type="checkbox">Компактный вид</label>
<p id="status" aria-live="polite"></p>
<script>
const key = 'training-ui:v1';
const checkbox = document.querySelector('#compact');
const status = document.querySelector('#status');
function readSettings(storage) {
  try {
    const value = JSON.parse(storage.getItem(key));
    return { compact: value?.compact === true };
  } catch { return { compact: false }; }
}
let initial = { compact: false };
try { initial = readSettings(localStorage); } catch {}
function apply() { document.body.classList.toggle('compact', checkbox.checked); }
checkbox.checked = initial.compact;
apply();
checkbox.addEventListener('change', () => {
  apply();
  try {
    localStorage.setItem(key, JSON.stringify({ compact: checkbox.checked }));
    status.textContent = 'Настройка сохранена';
  } catch { status.textContent = 'Вид изменён, но сохранить настройку не удалось'; }
});
</script><style>body.compact { font-size: 0.9rem; }</style></html>

Открывайте пример через локальный HTTP-сервер: python -m http.server 8000 в папке файла. MDN предупреждает, что поведение localStorage для file:// не определено надёжно и доступ может завершаться исключением. Переключите настройку и перезагрузите страницу на том же адресе.

Ситуации, которые надо обработать
Что сравнить	На что смотреть	Что сделать
Ключ отсутствует	Начальное состояние	Выбрать compact: false
JSON повреждён	Старые или изменённые данные	Использовать безопасный вариант по умолчанию
Тип неверный	Например, строка вместо boolean	Принимать только строгое true
Хранилище недоступно	Ошибка чтения или записи	Сохранить работоспособность текущего интерфейса

Хранилище не является источником доверия

Пользователь и другие выполняемые на том же origin скрипты могут изменить данные. Поэтому прочитанный объект валидируется, а не назначается целиком состоянию приложения. В примере известен один boolean. Смена структуры в будущем потребует миграции или другого ключа. Не вызывайте clear ради своей настройки: это затронет другие ключи origin.