Что такое кэш и cookie браузера и зачем их чистить

Кэш браузера — это локальное хранилище копий уже загруженных ресурсов сайта (HTML, CSS, скриптов, шрифтов, картинок), чтобы при повторном заходе не качать их заново. Cookie — это небольшие пары «ключ-значение», которые сайт хранит в браузере, чтобы узнавать вас между запросами: держать вход в аккаунт, помнить настройки, считать аналитику. Это два разных механизма, и путать их не стоит.

Ниже разберем, чем кэш отличается от cookie и от третьего хранилища — localStorage; какие бывают cookie (сессионные и постоянные, свои и сторонние); что значат флаги HttpOnly, Secure и SameSite; зачем чистить кэш и cookie и как это сделать в основных браузерах.

Кэш: копии ресурсов ради скорости

Когда браузер первый раз открывает страницу, он скачивает с сервера ее части: разметку, стили, скрипты, изображения. Часть этих файлов меняется редко, поэтому браузер сохраняет их копии локально — это и есть кэш. При следующем визите он берет неизменные файлы из кэша, а с сервера запрашивает только то, что могло обновиться. Итог — меньше трафика и быстрее загрузка.

Что попадет в кэш и на какой срок, решает не браузер по своему усмотрению, а сервер — через заголовки ответа (Cache-Control, Expires, ETag). Упрощенно: сервер помечает ресурс «можно хранить N секунд», браузер до этого срока использует копию, а после — переспрашивает, изменился ли файл. Точные правила кэширования сложнее и зависят от заголовков конкретного сайта.

Два полезных факта про обход кэша:

• В режиме инкогнито кэш и cookie не сохраняются между сессиями: окно закрыли — данные стерлись. Во время самой сессии кэш все же используется.
• Комбинация Ctrl+F5 (в Chrome/Firefox/Edge) делает «жесткую» перезагрузку — страница грузится без учета кэша. На macOS аналог — Cmd+Shift+R.

Cookie: узнавание между запросами

HTTP по своей природе не помнит предыдущих запросов: каждый запрос для сервера как первый. Cookie решают эту задачу. Сервер в ответе присылает заголовок Set-Cookie, браузер сохраняет значение и затем сам прикладывает его к каждому следующему запросу к тому же домену. Так сайт понимает, что это тот же посетитель.

Типовые задачи cookie:

• Сессия входа. После логина сервер кладет в cookie идентификатор сессии, и вы не вводите пароль на каждой странице.
• Настройки. Регион, язык, тема оформления — чтобы не выбирать заново.
• Аналитика и реклама. Сторонние скрипты помечают браузер идентификатором, чтобы связывать визиты.

Cookie — это маленькие текстовые значения. По распространенному ограничению один cookie — примерно до 4 КБ, а на один домен браузер хранит их ограниченное число (точные лимиты зависят от браузера). Класть в cookie большие данные нельзя — для этого есть другие хранилища.

Сессионные и постоянные cookie

• Сессионный cookie живет, пока открыт браузер (точнее — до конца сессии). У него не задан срок истечения. Закрыли браузер — cookie удалился. Так обычно хранят временную сессию входа.
• Постоянный cookie имеет явный срок жизни — атрибут Expires (конкретная дата) или Max-Age (число секунд). Он переживает перезапуск браузера и удаляется по истечении срока или вручную. Так помнят «запомнить меня» и долгие настройки.

Свои и сторонние cookie

• First-party (свой) cookie принадлежит домену, который открыт в адресной строке. Например, вы на otus.ru — и cookie от otus.ru свой.
• Third-party (сторонний) cookie ставит другой домен, чей ресурс подгружен на странице (рекламный или аналитический скрипт, встроенный виджет). Именно на них держится межсайтовое отслеживание, поэтому браузеры их все сильнее ограничивают: Safari и Firefox по умолчанию блокируют сторонние cookie уже несколько лет, а в Chrome политика последовательно ужесточается.

Флаги безопасности cookie

Помимо значения у cookie есть атрибуты, которые задает сервер и которые влияют на безопасность:

Важная граница: HttpOnly имеет смысл только когда cookie выставлен сервером через Set-Cookie. Если попытаться поставить HttpOnly из JavaScript через document.cookie, браузер этот флаг проигнорирует — защита работает лишь со стороны сервера. Значение SameSite=Lax в современных браузерах используется по умолчанию, если сервер флаг не указал явно.

Три хранилища: кэш vs cookie vs localStorage

Кроме кэша и cookie у сайта есть третье клиентское хранилище — localStorage: хранилище строковых пар «ключ-значение», доступное только из JavaScript и никогда не уходящее на сервер само. Три механизма легко путают, разведем их таблицей.

Короткий ориентир по выбору: кэш — забота о скорости, им управляет сервер заголовками; cookie — когда данные нужны серверу на каждом запросе (сессия, идентификатор); localStorage — когда данные нужны только фронтенду и серверу их слать не надо (черновик формы, локальные настройки интерфейса).

Cookie и localStorage в коде

Ниже примеры синтаксиса. Оба API — браузерные: объектов document и localStorage в чистом Node.js без эмуляции DOM нет, поэтому этот код запускается на странице (например, в консоли DevTools), а в Node упадет с ReferenceError.

// document.cookie: чтение и запись cookie на странице
// Запишем cookie на 7 дней, только по HTTPS, с ограничением кросс-сайтовой отправки:
document.cookie = "theme=dark; max-age=" + 60 * 60 * 24 * 7 + "; path=/; Secure; SameSite=Lax";

// Чтение вернет ОДНУ строку со всеми доступными cookie вида "ключ1=значение1; ключ2=значение2":
console.log(document.cookie); // например: "theme=dark"
// cookie с флагом HttpOnly в эту строку НЕ попадет - JS его не видит

Присваивание document.cookie = "..." не затирает остальные cookie, а добавляет или обновляет один — это особенность API, которая часто удивляет новичков. Чтобы удалить cookie, ему задают истекший срок (max-age=0).

// localStorage: строковое хранилище только на стороне браузера
localStorage.setItem("lang", "ru");         // сохранить пару ключ-значение
console.log(localStorage.getItem("lang"));  // прочитать -> "ru"
localStorage.removeItem("lang");            // удалить один ключ
localStorage.clear();                        // очистить все для этого сайта

localStorage хранит только строки: число или объект нужно сериализовать (JSON.stringify) при записи и разбирать (JSON.parse) при чтении. В отличие от cookie, эти данные никогда не отправляются на сервер автоматически.

Зачем чистить кэш

• Устаревшие копии. Если сайт обновился, а браузер продолжает показывать старую версию из кэша, страница может отображаться некорректно — «поехала» верстка, не подтянулись новые скрипты. Очистка заставляет взять свежие файлы с сервера.
• Освобождение места. Кэш со временем разрастается и занимает место на диске.
• Починка сбоев. Часть ошибок на стороне клиента (битая страница, зависший виджет) лечится очисткой кэша — это стандартный первый шаг диагностики.

Зачем чистить cookie

• Приватность. Cookie, особенно сторонние, позволяют связывать вашу активность между визитами и сайтами. Их очистка сбрасывает часть такого отслеживания.
• Чужой доступ. Если за компьютером сидит посторонний, сохраненные сессии дают ему вход в ваши аккаунты без пароля. Очистка cookie разлогинивает.
• Сброс залипшего состояния. Иногда сайт «залипает» в некорректной сессии или настройке — удаление его cookie возвращает чистый вход.

Помните: после очистки cookie вы выйдете из аккаунтов и потеряете сохраненные настройки сайтов — это ожидаемое поведение, а не поломка.

Как чистить в основных браузерах

Во всех браузерах на движке Chromium и в Firefox быстрый путь к диалогу очистки — сочетание клавиш. В открывшемся окне можно выбрать раздельно, что удалять: кэш, cookie, историю — и за какой период.

Совет: чтобы почистить кэш, но не разлогиниваться везде, в диалоге снимите галочку с cookie и оставьте только «изображения и файлы в кэше». Так вы обновите ресурсы без сброса всех сессий.

Выводы

• Кэш — локальные копии файлов сайта ради скорости; чем и насколько кэшировать, решает сервер через заголовки ответа.
• Cookie — небольшие значения, которые браузер отправляет серверу с каждым запросом; бывают сессионные и постоянные, свои и сторонние.
• Флаги HttpOnly, Secure, SameSite защищают cookie; HttpOnly работает только при установке cookie сервером, из JS его не поставить.
• localStorage — третье хранилище: строковые пары только для фронтенда, на сервер не уходят; в отличие от cookie, больше по объему и не шлются автоматически.
• Кэш чистят от устаревших копий и сбоев, cookie — ради приватности и выхода из аккаунтов; в браузере это раздельные галочки в одном диалоге (Ctrl+Shift+Del).

Где применяется / связь с практикой

Кэш, cookie и localStorage — это повседневная реальность фронтенд-разработки: сессии, авторизация, хранение настроек и защита от типовых атак вроде XSS и CSRF строятся именно вокруг этих механизмов и их флагов. Понимать, что уходит на сервер, а что живет только в браузере, нужно каждому, кто пишет для веба на JavaScript.

Смежные темы: Кэш процессора: описание, уровни, особенности.

FAQ

Очистка кэша удалит мои пароли и сохраненные входы?
Нет. Пароли и сессии входа хранятся в cookie и в менеджере паролей, а не в кэше. Если снять в диалоге галочку с cookie и чистить только кэш, вы останетесь залогинены.

Почему сайт после обновления выглядит сломанным, а после Ctrl+F5 — нормально?
Браузер показал старые файлы из кэша, не совпавшие с новой версией сайта. Жесткая перезагрузка (Ctrl+F5 или Cmd+Shift+R) грузит ресурсы заново, минуя кэш, поэтому верстка встает на место.

Можно ли из JavaScript прочитать любой cookie сайта?
Нет. Через document.cookie доступны только cookie без флага HttpOnly. Именно HttpOnly не дает вредоносному скрипту украсть сессионный cookie при XSS-атаке.