Редакция Romanov Lab · Опубликовано
Человек сохранил несколько товаров, вернулся с телефона и увидел пустой список. Или удалил позицию на одном устройстве, а после входа старая копия вернула её обратно. Избранное кажется маленькой функцией, пока не требуется объяснить, где хранится выбор и как несколько копий согласуются между собой.
Сначала определите обещание: сохранение в этом браузере, в аккаунте или между устройствами. Интерфейс должен говорить именно о той надёжности, которую обеспечивает реализация.
Выберите единицу сохранения
В избранном может храниться модель целиком или конкретное исполнение. Оба варианта допустимы, но дают разное поведение. Если покупатель сохраняет платье определённого размера и цвета, возвращение к варианту по умолчанию теряет часть решения.
Запись должна содержать устойчивый идентификатор товара, при необходимости идентификатор варианта, момент добавления и собственный идентификатор операции. Название, фото и цена нужны для отображения, но их не стоит использовать как ключ: они меняются.
Отдельно решите, что означает повторное нажатие. Обычно оно удаляет ту же запись, но не другой размер той же модели. Доступное название кнопки должно объяснять действие и состояние: добавить выбранное исполнение или удалить его из избранного.
Гость и аккаунт: разные гарантии
Гостевой список в браузере снижает порог использования. Пользователь может начать подбор без регистрации. Но такой список не переносится автоматически на другой браузер или устройство и может исчезнуть после очистки данных.
MDN описывает localStorage как хранилище для origin, сохраняющее данные между обычными сессиями браузера. В приватном режиме данные удаляются при закрытии последней приватной вкладки; политика браузера может запретить сохранение. Поэтому обещание «сохраним навсегда» некорректно даже для успешно выполненной записи.
Аккаунтный список хранится на сервере и доступен после входа на поддерживаемых устройствах. Здесь важны проверка владельца каждой операции, обработка истёкшей сессии и отсутствие чужих записей в кэше. Сервер не должен доверять переданному клиентом идентификатору владельца.
Практичный текст для гостя: «Сохранено в этом браузере. Войдите, чтобы открыть список на другом устройстве». Если запись не удалась, не оставляйте заполненное сердечко с сообщением об успехе. Можно временно сохранить выбор в памяти вкладки, ясно обозначив ограничение.
Объединение после входа требует правила
Простое объединение без повторов подходит только для ограниченного случая: первый вход гостя в аккаунт и согласованное добавление его текущего списка. В ключ совпадения входит выбранное исполнение, если оно сохраняется отдельно.
Учебный пример: у гостя сохранены A-синий и B, в аккаунте — A-синий и C. После подтверждённого переноса получается три записи: A-синий, B и C. Порядок задаётся заранее, например недавние добавления первыми. Пользователь видит понятный итог и может отменить нежелательное добавление.
Но объединять все снимки при каждом входе опасно. Если B удалён из аккаунта, старая браузерная копия не должна бесконечно возвращать его. После успешной миграции отметьте гостевой список как перенесённый и переключите источник данных. Повтор той же операции переноса не создаёт дубли.
Для полноценной синхронизации нескольких устройств полезны отдельные операции добавления и удаления с версиями, а не перезапись всего массива. Удаление должно оставаться известным достаточно долго, чтобы устаревшая копия не восстановила запись. Конкретную схему версий выбирают по масштабу и требованиям, но её результат проверяется одним и тем же конфликтным сценарием.
Не смешивайте аккаунты на общем устройстве
После выхода очистите из интерфейса и локального кэша данные прежнего аккаунта. Решите, остаётся ли отдельный гостевой список и какие действия пользователя туда попадают. Не копируйте автоматически всё аккаунтное избранное в общий гостевой список.
Если затем входит другой человек, его список загружается независимо. Особенно важно проверить это для товаров, выбор которых может раскрывать личные обстоятельства. Возможность сохранения в аккаунте не означает согласия на публичный список или рассылку.
Если предусмотрена ссылка «Поделиться», это отдельная функция: показывайте, какие позиции станут доступны получателю и можно ли отозвать ссылку. Для обычного избранного публичный доступ не нужен.
Несколько вкладок и медленная сеть
В гостевом режиме событие storage помогает другим вкладкам того же origin узнать об изменении localStorage. Оно не срабатывает в окне, которое само внесло изменение, поэтому текущий интерфейс обновляют отдельно. Событие уведомляет о записи, но не решает конфликты параллельной перезаписи массивов.
В аккаунтном режиме можно сразу менять состояние кнопки, если предусмотрен честный откат при отказе сервера. Отправляйте желаемое состояние «сохранить» или «удалить», а не неоднозначную команду «переключить»: безопасный повтор тогда не инвертирует результат второй раз.
При неизвестном результате запроса проверьте серверное состояние или повторите идемпотентную операцию. Если сессия истекла, сохраните ещё не отправленный выбор и предложите войти, не выдавая локальную картинку за подтверждённую синхронизацию.
Товар изменился или исчез
Список хранит выбор, но обычно не резервирует товар и не фиксирует цену. Сообщите это, если интерфейс может создать обратное ожидание. При открытии загружайте актуальные сведения, отдельно отмечая недоступное исполнение.
Удалённую позицию не обязательно молча вычёркивать. Можно оставить понятную строку «Товар больше недоступен» и дать удалить её. Замену пользователь выбирает сам: другой цвет или аналог не равны сохранённому варианту. Если нужно показывать прежнюю цену для сравнения, явно отличайте её от действующей.
Критерии готовности
- Гостевой список сохраняется после обычного перезапуска и честно сообщает об ограничении при запрете хранения.
- Вход объединяет записи один раз, без дублей и потери выбранного исполнения.
- Удалённый товар не возвращается из старой копии после синхронизации.
- Выход и смена аккаунта не показывают чужое избранное.
- Повтор запроса после обрыва сети сохраняет нужное состояние.
- Несколько вкладок сходятся к согласованному списку.
- Новая цена и отсутствие товара отображаются без подмены сохранённого выбора.
Надёжное избранное экономит пользователю повторный подбор. Главный критерий здесь — сохранность намерения и честное объяснение границ хранения, а не число нажатий на сердечко.
Нужен план для вашего проекта? Напишите нам в Telegram или по электронной почте. Обсудим разработку, продвижение или поддержку сайта.
