😕 Как localStorage может сломать ваш сайт или приложение

Многие не знают, но обращение к localStorage или sessionStorage может вызвать ошибку — и ваш сайт внезапно упадёт.

Ошибки могут возникать по двум основным причинам: при записи или при доступе к хранилищу.

──

📦 Ошибка при записи — QuotaExceededError

Самая распространённая проблема. Происходит, когда вы пытаетесь записать слишком много данных.

▪️ Что происходит:
localStorage.setItem() падает с ошибкой QuotaExceededError (или DOMException с этим именем), если лимит хранилища превышен.

▪️ Почему:
Браузер выделяет под данные сайта ограниченное место — обычно около 5–10 МБ. Если попытаться записать больше, то браузер заблокирует операцию.

▪️ Пример:

try {
  localStorage.setItem('my_data', '...очень много данных...');
} catch (error) {
  const isQuotaError =
    error &&
    (
      error.name === 'QuotaExceededError' ||  // стандарт
      error.name === 'NS_ERROR_DOM_QUOTA_REACHED' || // Firefox
      error.code === 22 || // старый WebKit
      error.code === 1014  // Firefox старый
    );

  if (isQuotaError) {
    console.log('Переполнено localStorage');
  } else {
    console.log('Другая ошибка:', error);
  }
}

──

🛡 Ошибка при доступе — SecurityError

Более коварная ошибка. Может возникнуть даже при чтении window.localStorage.

▪️ Что происходит:
Даже попытка выполнить const storage = window.localStorage; может выбросить SecurityError.

▪️ Почему:
Браузер полностью заблокировал доступ к хранилищу из соображений приватности.

▪️ Основные причины:
— Пользователь отключил cookies и данные сайтов в настройках.
— Используется режим инкогнито (в некоторых браузерах он блокирует localStorage).
— Скрипт выполняется внутри sandboxed iframe без allow-storage.

▪️ Пример:

let storage;
try {
  storage = window.localStorage;
  storage.setItem('__test__', '1');
  storage.removeItem('__test__');
} catch (e) {
  console.error('Ошибка: хранилище недоступно!', e.name);
  // используем in-memory fallback
}

──

🤔 Как защититься?

В одной из моих библиотек я реализовал класс SafeStorage, который оборачивает все операции с хранилищем в try/catch.
Такой подход гарантирует, что приложение не упадёт при любых ошибках доступа к storage.

👉 Посмотреть реализацию можно здесь:
https://github.com/webeach/react-hooks/blob/main/src/classes/SafeStorage/SafeStorage.ts

──

💡 Совет

Если вы используете localStorage или sessionStorage в React‑приложении, лучше вынести всю работу с ними в отдельный хук. Там можно централизованно обработать ошибки, создать fallback‑хранилище и гарантировать, что приложение не упадёт даже в самых неожиданных сценариях.

Также вы можете воспользоваться готовыми безопасными хуками из моей библиотеки @webeach/react-hooks:

import { useLocalStorage } from '@webeach/react-hooks/useLocalStorage';
import { useSessionStorage } from '@webeach/react-hooks/useSessionStorage';

export function MyComponent() {
  const [count, setCount] = useLocalStorage<number>('app:count', 0);
  const [step, setStep] = useSessionStorage<number>('wizard:step', 1);

  // ...
}

▪️ Документация хуков:
— useLocalStorage
— useSessionStorage

#javascript #frontend #react