Вебсправочник
Основы веб-разработки

Ошибка записи в браузерное хранилище: как сохранить рабочий интерфейс

Запись в localStorage может завершиться ошибкой из-за ограничений объёма или политики среды. Интерфейс должен продолжать работать, даже если настройку не удалось сохранить между посещениями.

Назначение

Запись в localStorage может завершиться ошибкой из-за ограничений объёма или политики среды. Интерфейс должен продолжать работать, даже если настройку не удалось сохранить между посещениями.

Как это работает

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

Пример

function saveLessonPreference(value) {
  try {
    localStorage.setItem("lesson-demo:theme", value);
    return true;
  } catch (error) {
    console.warn("Настройка действует только в текущем интерфейсе:", error.name);
    return false;
  }
}
console.log(saveLessonPreference("light"));

Что должно получиться

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

Граница применения и частая ошибка

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

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

Проверьте чтение своего ключа после перезагрузки. Для сценария отказа используйте изолированную тестовую среду или подменяемую функцию записи. После опыта удалите только lesson-demo:theme через removeItem.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.