Представьте ситуацию: вы заходите в интернет-магазин, добавляете кроссовки в корзину — и случайно закрываете вкладку. Затем открываете сайт снова, а товар все еще на месте. Но как так получается, что данные никуда не исчезли?
Каждый раз при открытии страницы сайт встречает вас как в первый раз. Поэтому, чтобы помнить настройки и содержимое корзины, он сохраняет данные в браузере на вашем устройстве — будто оставляет себе записку.
Такую записку можно поместить в одно из трех мест: cookies, localStorage или sessionStorage. Они различаются сроком хранения, доступным объемом и тем, отправляются ли данные на сервер. Давайте рассмотрим каждый из вариантов.
Cookies — хранилище для сессий, авторизации и настроек
В первые годы развития интернета протокол HTTP не сохранял состояние между запросами. Сервер отдавал браузеру нужные данные, не запоминал пользователя и не мог связать несколько запросов в одну сессию. Из‑за этого разработчикам приходилось выдумывать дополнительные механизмы, просто чтобы сайт мог выполнить авторизацию или запомнить содержимое корзины.
Чтобы это исправить, в 1994 году программист Netscape Лу Монтулли предложил концепцию cookies — «печенек». Под этим он подразумевал небольшие фрагменты данных, которые браузер хранит на устройстве пользователя и автоматически прикрепляет при запросах к нужному домену.
Обычно cookie выглядит как строка в формате ключ=значение. Чтобы было понятнее, допустим, вы входите в аккаунт на каком‑то сайте. Когда вы вводите логин и пароль, браузер отправляет эти данные на сервер. После этого сервер все проверяет, создает сессию и возвращает браузеру ее идентификатор.
HTTP/1.1 200 OK Set-Cookie: session_id=a3f9b2c1
Когда браузер получает ответ с заголовком Set-Cookie, он сохраняет cookie на вашем компьютере. Затем вы переходите на другую страницу сайта. При каждом следующем запросе браузер достает сохраненную куку и добавляет ее в заголовок Cookie. Сервер видит это, находит сессию a3f9b2c1 в своей базе и понимает: пользователь авторизован — можно показывать личный кабинет.
GET /profile HTTP/1.1 Cookie: session_id=a3f9b2c1
Помимо session_id в cookies могут храниться и другие значения, которые браузер будет отправлять на сервер: токен авторизации, выбранный язык, регион, флаги A/B‑тестов и различные идентификаторы для аналитики.
Кроме значения у куки есть атрибуты — параметры, которые управляют ее поведением. Они задают, сколько cookie хранится, на каких страницах и доменах она доступна, будет ли передаваться только по HTTPS и можно ли прочитать ее через JavaScript. Например, запись может выглядеть так:
HTTP/1.1 200 OK Set-Cookie: session_id=a3f9b2c1; Max-Age=3600; HttpOnly; Secure
В этом примере атрибут Max-Age=3600 задает срок жизни cookie — 1 час. HttpOnly делает ее недоступной для JavaScript, а Secure не позволяет отправлять куки по незашифрованному протоколу HTTP — только по HTTPS.
До 2009 года cookies были по сути главным способом хранить данные на стороне клиента — других удобных механизмов просто не было. Но сайты усложнялись, и разработчикам нужно было сохранять в браузере все больше информации: настройки, тему, корзину, историю просмотров и многое другое.
Однако проблема в том, что cookies уходят на сервер с каждым запросом. Поэтому чем больше данных разработчики складывали в куки, тем сильнее росли трафик и нагрузка. В результате сайты начинали заметно тормозить.
Так продолжалось до выхода HTML5. В нем появился Web Storage — стандарт хранения данных прямо в браузере без отправки на сервер. Он включает механизмы localStorage и sessionStorage, которые мы разберем далее.
localStorage — хранилище для данных, которые остаются после закрытия браузера
Если cookies — это пропуск, который браузер показывает серверу при каждом запросе, то localStorage — ваш сейф внутри браузера. JavaScript записывает туда пары ключ=значение, а потом читает их обратно. Данные могут храниться годами и не отправляются на сервер автоматически — они лежат локально, пока сайт не решит их использовать. Поэтому даже если вы закроете браузер или перезагрузите компьютер, сайт сможет восстановить прежние настройки.
Например, JavaScript может записать в localStorage значение theme=dark, а при следующей загрузке страницы — прочитать его и применить темную тему.
Синтаксис localStorage довольно простой, и для большинства задач вам достаточно знать всего четыре метода:
- .setItem(‘ключ’, ‘значение’) — записать значение;
- .getItem(‘ключ’) — прочитать данные;
- .removeItem(‘ключ’) — удалить запись по ключу;
- .clear() — очистить хранилище.
Чтобы попрактиковаться, откройте инструменты разработчика в любом браузере (F12 или комбинация Ctrl+Shift+I) и перейдите на вкладку Console. Для начала создадим две пользовательские настройки в localStorage:
localStorage.setItem('theme', 'dark');
localStorage.setItem('fontSize', '18px');
Теперь эти данные записаны в памяти браузера и будут храниться там, пока вы их не удалите. Давайте их прочитаем и выведем результат в консоль:
const currentTheme = localStorage.getItem('theme');
const currentFontSize = localStorage.getItem('fontSize');
console.log('Текущая тема:', currentTheme); // Текущая тема: dark
console.log('Размер шрифта:', currentFontSize); // Размер шрифта: 18px
Можете перезапустить браузер или компьютер и снова открыть инструменты разработчика. В Console сохраненные значения не появятся — консоль не запоминает вывод между перезапусками, это всего лишь окно для команд.
Чтобы проверить данные, повторно выполните localStorage.getItem(…) или откройте вкладку Application (в Chrome и Edge) и в левом меню выберите Local Storage → ваш домен. Здесь будут сохранены ключи и значения.
Если какая‑то настройка нам больше не нужна, мы можем ее удалить. Давайте сбросим размер шрифта и оставим в localStorage только цветовую тему:
localStorage.removeItem('fontSize');
// Проверяем:
console.log(localStorage.getItem('fontSize')); // null (данных больше нет)
console.log(localStorage.getItem('theme')); // dark (эта запись осталась)
Также мы можем одной командой полностью очистить все хранилище:
localStorage.clear(); // Проверяем: console.log(localStorage.length); // 0 (хранилище пустое)
Для большей наглядности скачайте файл theme-gallery.html и откройте его в браузере. Это небольшой проект с популярными цветовыми темами. Выберите любую тему, закройте браузер и откройте этот файл снова — вы увидите, что выбор сохранился в localStorage и страница вспомнила сделанную настройку.
Дополнительно загляните в Local Storage и проверьте сохраненное значение. Мы выбрали тему Gruvbox Light, и после перезагрузки сайт применил ее снова.
sessionStorage — хранилище для временных данных в текущей вкладке
Продолжим нашу аналогию: cookies — это бейдж‑пропуск, localStorage — надежный сейф для длительного хранения, а sessionStorage — одноразовый черновик. JavaScript может записывать туда данные, но они живут только в пределах одной вкладки (сессии) и исчезают, как только вы ее закроете.
sessionStorage помогает хранить данные только на время текущей задачи — и не превращать браузер в архив старых настроек. Например, его удобно использовать в многошаговых формах: чтобы при случайной перезагрузке страницы введенные данные не пропали, но после закрытия вкладки исчезли.
Методы sessionStorage такие же, как и у localStorage: .setItem(), .getItem(), .removeItem() и .clear(). Попробуйте запустить следующий код в консоли:
// Добавить две записи
sessionStorage.setItem('message', 'Hello, world!');
sessionStorage.setItem('language', 'JavaScript');
// Прочитать и вывести в консоль
console.log(sessionStorage.getItem('message')); // Hello, world!
console.log(sessionStorage.getItem('language')); // JavaScript
// Удалить одну запись
sessionStorage.removeItem('message');
console.log(sessionStorage.getItem('message')); // null
console.log(sessionStorage.getItem('language')); // JavaScript (эта запись осталась)
// Очистить все
sessionStorage.clear();
console.log(sessionStorage.getItem('language')); // null
Как только вы добавите две записи в sessionStorage, загляните в Local Storage — там будет пусто. Это нормально: sessionStorage и localStorage — независимые хранилища, и данные между ними не переносятся. Поэтому проверяйте сохраненные значения в соседнем разделе — Session Storage.
Для закрепления перепишем предыдущее предложение. Теперь, если вы выберете тему и обновите вкладку, она сохранится. Но если закрыть вкладку и открыть файл session-theme.html, тема сбросится на значение по умолчанию.
Также заглянем в раздел Session Storage и убедимся, что даже после обновления вкладки в нем сохранилась наша выбранная тема — Monokai.
Подводим итоги и сравниваем cookies, localStorage и sessionStorage
В реальных проектах cookies, localStorage и sessionStorage не конкурируют друг с другом — у каждого механизма своя роль. Поэтому разработчику важно уметь работать со всеми тремя и выбирать по задаче: что отправлять на сервер, что сохранять между заходами, а что держать только до закрытия вкладки. Давайте посмотрим на основные характеристики в таблице и сравним их.
Полезные статьи и ссылки по теме
- MDN Web Storage API — документация по localStorage и sessionStorage
- MDN HTTP cookies — руководство по работе с куки в браузере
- WHATWG Storage Standard — официальный стандарт по работе Web Storage
- HTML5: что это такое, возможности и отличия от предыдущих версий
- Как работает интернет и кто в нем главный: разбираемся в устройстве глобальной сети
- HTTP: что это за протокол передачи данных и как он работает
- Топ-10 аналогов GitHub для российских разработчиков
