localStorage и sessionStorage

localStorage и sessionStorage — это встроенные в браузер механизмы для хранения данных на стороне клиента. Оба предоставляют простой API для сохранения пар «ключ-значение», но отличаются по времени жизни и области видимости.

localStorage: долговременное хранение

localStorage сохраняет данные бессрочно — они остаются даже после закрытия браузера и перезагрузки компьютера. Это делает его идеальным для:

  • Сохранения пользовательских настроек (тема, язык, размер шрифта)
  • Кэширования данных API для ускорения загрузки
  • Хранения состояния форм между визитами

Основные методы:

  • localStorage.setItem(key, value) — сохраняет строку
  • localStorage.getItem(key) — возвращает строку или null
  • localStorage.removeItem(key) — удаляет запись
  • localStorage.clear() — очищает всё хранилище

Важно: localStorage хранит только строки. Для объектов и массивов используйте сериализацию:

// Сохранение
localStorage.setItem('user', JSON.stringify({ name: 'Алиса' }));

// Загрузка
const user = JSON.parse(localStorage.getItem('user') || '{}');

sessionStorage: хранение на время сессии

sessionStorage работает так же, как localStorage, но данные удаляются при закрытии вкладки (не браузера целиком). Это полезно для:

  • Восстановления формы после обновления страницы
  • Хранения временных данных, не нужных после ухода с сайта

API идентичен:

sessionStorage.setItem('draft', text);
const draft = sessionStorage.getItem('draft');

Использование с React

Часто localStorage интегрируют с useState:

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

Такой кастомный хук позволяет работать с локальным хранилищем как с обычным состоянием.

Ограничения

  • Максимум ~5–10 МБ (зависит от браузера)
  • Доступ только в том же origin (протокол + домен + порт)
  • Не отправляются на сервер автоматически (в отличие от cookies)
  • Данные видны пользователю — никогда не храните секреты (пароли, токены доступа)