LocalStorage и Cookies

LocalStorage и Cookies: что выбрать для вашего сайта — практика, цифры, типовые просчеты

При разработке или доработке сайта перед владельцем и разработчиком встает вопрос: где хранить временные настройки, корзину, сессионные идентификаторы или данные для персонализации? Два самых распространенных инструмента — LocalStorage и Cookies. Но их часто путают или используют не по назначению, что ведет к потере производительности, проблемам с безопасностью и отказам в работе на мобильных устройствах. Разберем реальные варианты применения, этапы подбора и конкретные цифры, чтобы вы могли принять верное решение для своего проекта.

1. Реальные сценарии: когда что применять

Кейс 1: Корзина интернет-магазина
Вы храните список товаров, добавленных пользователем до оформления. Объем — до 50–100 товаров с описаниями (около 10–30 КБ). Лучшее решение — LocalStorage. Пример: средний размер корзины в магазине электроники составляет 22 КБ. Cookies для таких данных не подходят, так как лимит одного cookie — 4 КБ. Если использовать cookies, придется разбивать корзину на 5–6 отдельных записей, что усложняет код и снижает скорость загрузки страницы.

Кейс 2: Сессионная авторизация
Идентификатор сессии (session ID) — классический случай для Cookies. Типовой размер — 32 байта. Здесь важна автоматическая отправка на сервер с каждым запросом. LocalStorage не передается автоматически, и вам пришлось бы вручную добавлять его в заголовки, что создает риск XSS-атак.

Кейс 3: Персонализация интерфейса (темы, язык, размер шрифта)
Объем — обычно 2–5 КБ. LocalStorage идеален, так как сохраняет настройки даже после закрытия браузера. Cookies тоже можно использовать, но они будут передаваться на сервер при каждом запросе, увеличивая трафик. При 10 000 посещений в сутки лишние 5 КБ на запросе дают избыточные 50 МБ трафика в день только ради настроек темы.

2. Пошаговый алгоритм выбора для вашего проекта

1. Определите объем данных. Если размер одной записи превышает 4 КБ — однозначно LocalStorage (лимит 5–10 МБ). Пример: хранение загруженных фотографий для временного предпросмотра (до 100 КБ) — только LocalStorage.
2. Решите, нужна ли серверу эта информация. Если данные должны уходить на сервер при каждом HTTP-запросе (например, токен авторизации) — только Cookies с флагами HttpOnly и Secure. Если данные нужны только на клиенте (например, состояние открытых виджетов) — LocalStorage.
3. Проверьте требования к безопасности. Если данные критичны (пароли, ключи API) — никогда не используйте LocalStorage из-за уязвимости к XSS. Используйте только Cookies с атрибутами HttpOnly и SameSite. Для некритичных данных (предпочтения, кэш внешних ресурсов) — LocalStorage безопаснее, чем открытые Cookies.
4. Протестируйте на мобильных устройствах. Safari в режиме Private может отключить LocalStorage (реальный сценарий — 12% пользователей iOS). В такой ситуации используйте fallback на cookies с проверкой доступности хранилища.

3. Конкретные цифры для принятия решений

• Лимит Cookies на одно доменное имя: не более 50 штук. Общий вес всех cookies — до 4 КБ на домен. Превышение ведет к обрезанию данных.
• Лимит LocalStorage на один домен: 5–10 МБ в зависимости от браузера (Chrome — 10 МБ, Firefox — 5 МБ, Safari — 5 МБ). Реальный расход памяти: типичная страница использует 200–400 КБ для настроек и кэша.
• Время жизни: Cookies могут иметь время истечения (от 1 минуты до 10 лет). LocalStorage хранится до явного удаления пользователем или очистки браузером (на практике 90% пользователей редко чистят хранилище).
• Нагрузка на сервер: каждое cookie передается с каждым запросом. Для сайта с 100 000 запросов в день и 3 КБ «лишних» cookies (например, корзина, которую ошибочно сохранили в cookies) — дополнительный трафик 300 МБ в день. За месяц — 9 ГБ лишнего трафика.

4. Типичные просчеты заказчиков и разработчиков

• Ошибка №1: Хранение корзины товаров в Cookies. Приводит к обрезанию корзины до 4 КБ. Типовой результат: клиент добавляет 15–20 товаров, корзина перестает сохраняться, покупка срывается. Потеря конверсии — до 7–12% для магазинов с большим ассортиментом.
• Ошибка №2: Использование LocalStorage для хранения токенов доступа. При XSS-уязвимости на любой странице злоумышленник получает полный доступ к аккаунту пользователя. Практика 2025–2026 годов показывает, что 68% взломов через XSS происходят именно из-за токенов в LocalStorage. Решение — только Cookies с HttpOnly.
• Ошибка №3: Игнорирование режимов приватности. Многие сайты падают в Safari Private или Firefox Focus, когда LocalStorage недоступен. Проверяйте через try/catch и подкладывайте куки-запасник. Иначе пользователи в приватном режиме (около 18% всех визитов) увидят ошибку.
• Ошибка №4: Запись всей информации в одно cookie или один ключ LocalStorage. Это затрудняет отладку и обновление. Дробите на логические блоки: отдельно — настройки темы, отдельно — список товаров в корзине, отдельно — история просмотров.

Резюме для принятия решения

Для хранения данных на сайте всегда сначала ответьте на три вопроса: 1) Нужно ли серверу это значение? 2) Какой предполагаемый объем? 3) Какой уровень доступа со стороны скриптов? Если объем мал и данные должны уходить на сервер — Cookies. Если данные объемные, локальные, не критичные к XSS — LocalStorage. Комбинируйте оба инструмента: используйте Cookies только для сессионных маркеров и первичных настроек, а весь остальной кэш и персонализацию — в LocalStorage. Это снизит трафик на 30–50% и ускорит загрузку страниц для ваших посетителей.

Добавлено: 07.05.2026