Какие знаешь способы хранения данных в браузере?

Способы хранения данных в браузере

Браузер предоставляет несколько механизмов для сохранения данных на клиентской стороне. Каждый из них имеет свои особенности, ограничения и назначение. Знание этих методов критично для тестирования фронтенда.

1. Cookies (Куки)

Характеристики

• Размер: 4KB на cookie, обычно до 20-40 cookies на домен
• Область видимости: Отправляются на сервер с каждым запросом (если не HttpOnly)
• Срок жизни: Session cookie (до закрытия браузера) или persistent (с expiration date)
• Безопасность: HttpOnly флаг, Secure флаг (только HTTPS)

Примеры использования

• Сессионные данные и токены аутентификации
• Предпочтения пользователя
• Отслеживание посещений (tracking)

2. LocalStorage

Характеристики

• Размер: 5-10MB в зависимости от браузера
• Область видимости: Доступен только в пределах одного домена, синхронный доступ
• Срок жизни: Сохраняется до явного удаления, не удаляется при закрытии браузера
• API: localStorage.setItem(), getItem(), removeItem(), clear()

Примеры использования

• Долгосрочное сохранение пользовательских данных
• Тема сайта, настройки интерфейса
• Кэш данных для оффлайн-режима

3. SessionStorage

Характеристики

• Размер: 5-10MB, как и localStorage
• Область видимости: Только текущая tab/окно браузера
• Срок жизни: Удаляется при закрытии tab
• API: Идентичен localStorage

Примеры использования

• Временные данные в рамках сессии
• Состояние многошаговой формы
• Данные для конкретного окна браузера

4. IndexedDB

Характеристики

• Размер: Сотни MB-GB в зависимости от браузера
• Структура: NoSQL база данных с индексами
• API: Асинхронный (Promise-based), объектно-ориентированный
• Возможности: Транзакции, индексирование, сложные запросы

Примеры использования

• Крупные объемы структурированных данных
• Оффлайн приложения и PWA
• Кэширование сложных данных с поиском

5. WebSQL (устарело)

• Реляционная БД в браузере
• Прекращена разработка, не рекомендуется использовать
• Заменена на IndexedDB

6. Service Workers Cache API

Характеристики

• Назначение: Кэширование ресурсов для PWA и оффлайн
• Контролируется: Service Worker скриптом
• Размер: Зависит от браузера

Сравнительная таблица

Как тестировать

Инструменты

• DevTools (F12) — вкладка Application/Storage для inspect
• Playwright/Cypress — программное удаление и проверка данных
• Network tab — проверка отправки cookies

Что проверять

✓ Данные корректно сохраняются ✓ Данные доступны после перезагрузки ✓ Cookies отправляются в нужных запросах ✓ Приватный режим не сохраняет данные ✓ Удаление данных работает корректно ✓ CORS и domain isolation соблюдаются