localStorage: локальные настройки интерфейса

Основная идея

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

Доступ может завершиться ошибкой из-за настроек приватности или ограничения объёма. Операции синхронны, поэтому не записывайте большие данные на каждый ввод символа. При смене HTTP на HTTPS или порта origin меняется, и прежние настройки могут оказаться недоступны.

Пример JavaScript

try {
  localStorage.setItem("websprav-demo-theme", "light");
  const theme = localStorage.getItem("websprav-demo-theme") ?? "light";
  console.log(theme);
  localStorage.removeItem("websprav-demo-theme");
} catch (error) {
  console.warn("Настройка недоступна; используем значение по умолчанию");
}

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

Частая ошибка

Самостоятельная проверка

Проверьте отсутствие ключа и отказ доступа. Интерфейс должен сохранять работоспособность с настройками по умолчанию.

Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.

Следующие темы: строки JSON, значения по умолчанию.