Пользуешься, пользуешься ты интернетом и тут бац! И на всех сайтах — «Подтвердите cookie». Что такое куки? Зачем они нужны? И не переоформлю ли я свою квартиру, нажав на кнопку «Подтвердить»??
Сегодня мы с вами попробуем разобраться, откуда и почему возникли эти куки, и в чем разница между cookie, sessionStorage and localStorage? А также немножко затронем тему токенов и омниканальности.
🤔 Почему раньше не было баннеров про cookie, а теперь они везде?
Куки были всегда. Ещё с 1994 года, когда программист Netscape Лу Монтулли придумал их, чтобы сайт мог “запомнить корзину покупок”.
Просто раньше никто не спрашивал разрешения — сайты тихо ставили файлы, отслеживали пользователей и показывали персонализированную рекламу.
А потом пришли законы о приватности:
- В 2018 вступил в силу европейский GDPR,
- затем аналогичные требования появились в других странах, включая Россию (152-ФЗ “О персональных данных”).
Теперь сайты обязаны предупреждать, если собирают данные, которые можно связать с конкретным человеком. Отсюда и баннеры вроде “Мы используем cookie”.
А пользователи, которые видят эти окошки по сто раз в день, вырабатывают так называемую баннерную слепоту — это когда мозг перестаёт замечать повторяющиеся уведомления и автоматически тянется нажать “Принять всё”.
(Да, дизайнеры часто «помогают» яркой кнопкой.😏)
Наглядный пример
Возьмём интернет-магазин:
- На ноутбуке ты листаешь каталог, настраиваешь фильтры, добавляешь пару товаров в корзину.
- А потом вспоминаешь, что опаздываешь к бабушке и закрываешь вкладку.
- Пока ты едешь в автобусе, ты заходишь на тот же сайт интернет магазина на телефоне и продолжаешь.
Как магазин «помнит» твои товары в корзине?
- Cookies помогают серверу понять, что это ты (сессия, авторизация) и могут хранить небольшой идентификатор корзины.
- localStorage может держать большое количество клиентских настроек (фильтры, вид, тема) и даже корзину — но только на этом устройстве/браузере.
- sessionStorage удобен для временных данных внутри одной вкладки (шаги оформления заказа, заполнение формы) — исчезает при закрытии вкладки.
Чтобы вы увидели ту же корзину на другом устройстве, магазин хранит данные на сервере (в профиле или по анонимному cart_id, который связывается с твоим аккаунтом при входе). Локальные хранилища лишь помогают сделать интерфейс быстрым и удобным.
А теперь подробней. Cookies: что это и зачем они нужны
Cookies, или "куки" или "печеньки", — это небольшие текстовые файлы, которые сайты сохраняют на устройстве пользователя через браузер. Они появились ещё на заре интернета и долгое время были основным способом хранения данных на стороне клиента. По сути, куки — это пары "ключ-значение", где ключ — это имя, а значение — данные, такие как настройки или идентификаторы.
Куки используются для нескольких ключевых задач.
- Во-первых, для управления сессиями: они помогают сайту помнить, кто вы, чтобы не заставлять логиниться заново на каждой странице.
- Во-вторых, для персонализации: сайт может запомнить ваш язык, регион или предпочтения, например, светлую или тёмную тему.
- В-третьих, для отслеживания активности: куки позволяют анализировать, какие страницы вы посещаете, чтобы показывать релевантную рекламу или улучшать контент.
Данные в куки ограничены по размеру — обычно до 4 КБ на домен. Они передаются на сервер с каждым HTTP-запросом в виде заголовков, что делает их универсальными, но иногда замедляет загрузку страниц из-за лишнего трафика.
Куки могут быть сессионными (удаляются при закрытии браузера) или постоянными (хранятся месяцы или годы, пока не истечёт срок, заданный разработчиком). Например, в Google куки для аналитики могут жить от 6 до 24 месяцев.
Есть и защищённые куки. У них есть особые флаги:
- HttpOnly запрещает доступ из JavaScript, защищая от кражи через вредоносные скрипты (XSS).
- Secure куки передаются только по HTTPS, то есть по зашифрованному соединению.
В таких защищенных куках сайты часто хранят токен — длинную специальную строку вроде “электронного пропуска” (выглядит примерно вот так eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...), который подтверждает твою личность без пароля.
Когда ты входишь на сайт, сервер проверяет твой логин и пароль один раз, выдает токен — и дальше ты ходишь по сайту с этим пропуском. Пароль при этом повторно не передается, поэтому вход становится и удобнее, и безопаснее.
Куки помогают в омниканальности — это когда все каналы общения с компанией (сайт, приложение, соцсети и даже оффлайн) объединены в одну систему. Вспомним еще раз наш пример с интернет магазином:
- Ты начинаешь выбирать товар. Сначала смотришь сайт магазина на ноутбуке.
- Потом открываешь приложение на телефоне — и там уже сохранён твой выбор.
- Потом пишешь в чат поддержки — и оператор видит твою корзину и историю покупок.
- А если придёшь в офлайн-магазин, консультант тоже может открыть твой профиль и сказать: “Вы вчера добавляли этот товар в корзину, он у нас как раз в наличии.”
Этот и есть omni-channel — когда всё связано: сайт, приложение, соцсети, рассылки, офлайн-точки, call-центр. Ты как пользователь видишь одну экосистему, а не куски, оторванные друг от друга. Куки (с токенами) синхронизируют твою сессию через каналы, чтобы опыт был бесшовным.
Но куки не идеальны. Пользователь может их отключить, а хакеры — попытаться украсть токен через уязвимости вроде XSS (кросс-сайтовый скриптинг). Это когда злоумышленник вставляет на сайт вредоносный скрипт (например, через форму комментария), и браузер выполняет его. Скрипт может украсть твои куки или данные.
Чтобы защититься, сайты используют HTTPS и не хранят в куках пароли или чувствительную информацию. Ведь хранить пароль в браузере или в cookie — значит оставить ключ от квартиры под ковриком. Если cookie украдут, в нём будет токен — и злоумышленник сможет войти под твоим именем. Если бы там был пароль, он смог бы вообще полностью украсть учётку. Поэтому сайты хранят только токен, а пароль — только на сервере, в зашифрованном виде.
Куками можно управлять в настройках браузера — очищать, ограничивать или вообще запретить все (но тогда часть сайтов просто перестанет работать — не будет логина, корзины, настроек).
SessionStorage (Хранилище Сессии)
SessionStorage — это хранилище данных, доступное исключительно на стороне клиента (в браузере), которое работает очень похоже на LocalStorage, но имеет более короткий срок жизни.
Данные удаляются автоматически при закрытии вкладки или окна. Перезагрузка страницы данные не удаляет. Объем значительно больше, чем у Cookie, обычно около 5 МБ на домен. Данные хранятся как пары "ключ-значение" в строковом формате.
Это удобно для временных данных, не нужных после сессии, например, заполнения многостраничной формы или хранения промежуточных расчётов в приложении. SessionStorage не передаётся на сервер, что снижает трафик, и доступно только для текущего домена. Оно не поддерживается старыми браузерами, как IE7, но в современных — работает стабильно.
LocalStorage (Локальное Хранилище)
LocalStorage — это также клиентское хранилище, предназначенное для долговременного сохранения данных, даже после закрытия браузера или перезагрузки устройства данные сохраняются.
Объём — 5–10 МБ, формат "ключ-значение" в строках. Данные хранятся бессрочно и остаются до тех пор, пока пользователь вручную не очистит их (через настройки браузера или с помощью кода JavaScript).
Это подходит для долгосрочных настроек: темы интерфейса, предпочтения фильтров или оффлайн-доступа к данным. LocalStorage не отправляется на сервер с запросами, что делает его эффективным для снижения нагрузки. Как и sessionStorage, оно ограничено доменом и не работает в старых браузерах.
Заключение
Cookies, localStorage и sessionStorage — не конкуренты, а инструменты для разных задач. Разница между ними сводится к трем ключевым параметрам: место хранения (клиент/сервер), срок жизни и передача на сервер. Cookie — небольшой механизм для обмена данными с сервером. SessionStorage — временное хранилище для текущей вкладки. LocalStorage — постоянное хранилище для настроек и данных, которые должны сохраняться между сессиями пользователя. Выбор инструмента зависит исключительно от цели: нужно ли, чтобы данные были видны серверу, и как долго они должны существовать.