Как настроить доступ к Избранному — без ЛК и авторизации на сайте

Привет, Хабр! Меня зовут Катя Плаксина, я фронтенд-разработчик в Далее. Хочу поделиться решением, которое позволило реализовать возможность сохранения в Избранное без авторизации для пользователей одного крупного портала.
Почему стало необходимо реализовать такое решение? Во-первых, необходимость авторизации — одна из причин высоких отказов на сайте. Таким образом, мы просто облегчаем путь пользователя до цели. Во-вторых, без авторизации мы не собираем персональные данные, а значит, минимизируем риски, связанные с их хранением и передачей.
В чем технический вызов
Если страница работает через SSR, например, на Astro, серверу нужны данные заранее. Но если весь «источник правды» лежит в localStorage, сервер их не видит — браузерное хранилище доступно только на клиенте.
Без дополнительной логики страница будет рендериться пустой или требовать авторизации и бэкенда. Нужен промежуточный слой, который позволит передать минимальное состояние Избранного на сервер.
Разделяем хранилище на два слоя
Полный стейт Избранного остается в localStorage — там можно хранить существенно больше данных, чем в cookie, и удобно управлять состоянием на клиенте.
Легкий SSR-снапшот размещаем в cookie, кладем только favorites_preview:
первые 3–4 ID в каждой категории,
активные теги,
размер.
Сервер читает cookie и рендерит превью Избранного.
Что происходит после гидратации
Когда страница загрузилась, клиент сравнивает cookie и localStorage, дотягивает расхождения, корректно показывает или скрывает пустые состояния.
Чтобы избежать ошибок:
Добавляем mounted-флаг — не используем браузерные API во время SSR.
Настраиваем синхронизацию между вкладками через системное событие storage.
Используем кастомное событие
favorites:changedдля текущей вкладки. Storage в ней не срабатывает.
В итоге состояние Избранного остается консистентным во всех вкладках.
Почему не хранить всё только в cookie
Можно было ограничиться одним механизмом — хранить Избранное полностью в cookie. Но у такого подхода есть явные минусы:
cookie ограничены по объему,
перегрузка HTTP-запросов,
неудобное управление состоянием на клиенте.
Если хранить всё только в cookie, страдают производительность и масштабируемость решения.
Что получаем в итоге
На клиенте остается полноценное управление состоянием через localStorage.
Страница рендерится сразу с данными. Сервер читает легкий снэпшот из cookie и формирует превью избранного ещё до загрузки клиента.
Пользователь может вернуться к Избранному даже на следующий день — при заходе с того же устройства и браузера.
Буду рада узнать о вашем опыте реализации подобных задач в комментариях.












