Ответ
Cookie и Web Storage (LocalStorage/SessionStorage) — это механизмы хранения данных на стороне клиента, но с разными целями и характеристиками.
| Характеристика | Cookie | LocalStorage | SessionStorage |
|---|---|---|---|
| Объем | ~4 КБ на домен | ~5-10 МБ на домен | ~5-10 МБ на домен |
| Срок жизни | Устанавливается вручную (Expires/Max-Age). Могут быть сессионными (до закрытия браузера). | Сохраняются до явного удаления (JS или очистки браузера). | Удаляются при закрытии вкладки/браузера. |
| Передача на сервер | Автоматически отправляются с каждым HTTP-запросом (заголовки Cookie). |
Не отправляются автоматически. Доступны только через JavaScript. | Не отправляются автоматически. Доступны только через JavaScript. |
| Доступ | Доступны и на клиенте (document.cookie), и на сервере. |
Только на клиенте через window.localStorage. |
Только на клиенте через window.sessionStorage. |
| Синтаксис | Строка в формате key=value, сложный парсинг. |
Простой API (setItem, getItem), работа с ключ-значением. |
Простой API (setItem, getItem), работа с ключ-значением. |
Когда что использовать:
- Cookie: Идентификация сессии (токены), персональные настройки, которые нужны серверу. Из-за ограниченного размера и накладных расходов не подходят для больших данных.
- LocalStorage: Сохранение непередаваемых данных приложения (настройки UI, кэш), работа в оффлайн-режиме. Данные сохраняются между сессиями.
- SessionStorage: Временное хранение данных в рамках одной вкладки (например, состояние многошаговой формы).
Пример работы с LocalStorage:
// Сохранить данные
localStorage.setItem('theme', 'dark');
localStorage.setItem('userPreferences', JSON.stringify({ fontSize: 14 }));
// Получить данные
const theme = localStorage.getItem('theme'); // 'dark'
const prefs = JSON.parse(localStorage.getItem('userPreferences')); // { fontSize: 14 }
// Удалить данные
localStorage.removeItem('theme');
// Очистить всё
localStorage.clear();Ключевое отличие: Cookies предназначены для обмена небольшими порциями данных между клиентом и сервером, а Web Storage — это клиентская база данных ключ-значение для хранения больших объемов информации, не покидающей браузер.
Ответ 18+ 🔞
Давай разберем эту тему, а то тут, блядь, путаница у людей возникает, как будто они впервые видят браузер. Сидят, думают: "О, хранилище! Куда бы нахуярить свои данные?" А выбор-то есть, и он охуенно важен.
Смотри, есть три главных чувака на этой вечеринке: Cookie, LocalStorage и SessionStorage. И каждый из них — абсолютно разный мудак со своим характером.
Вот тебе разбор, чтобы ты не облажался.
Кто есть кто (или краткая сводка для тех, кто в танке)
| Признак | Cookie (Старый пердун) | LocalStorage (Упрямый скряга) | SessionStorage (Однодневка) |
|---|---|---|---|
| Сколько влезет | Жалкие ~4 КБ на весь домен. Чихнёшь — и всё. | Целых ~5-10 МБ. Уже похоже на дело. | Тоже ~5-10 МБ, но... |
| Сколько проживёт | Как скажешь. Можешь поставить срок, а можешь сделать "до закрытия браузера". | Бессмертная сука. Пока её вручную не удалишь или браузер не снесёшь — будет сидеть. | Однодневная бабочка. Закрыл вкладку — и пиздец, всё испарилось. |
| Лезет ли к серверу | Да, этот приставучий уродец лезет в каждый HTTP-запрос! Заголовок Cookie — это он. |
Нет, блядь. Сидит себе тихо в браузере и никуда не шляется. Только JS его достанет. | Тоже нет. Его удел — одна вкладка и больше ни хуя. |
| Кто его достанет | И браузер (через document.cookie), и сервер (видит все куки в заголовках). |
Только твой JavaScript на клиенте (window.localStorage). |
Только JS, да и то в рамках одной вкладки (window.sessionStorage). |
| Как с ним общаться | Ебался, простите, парсинг строки в формате ключ=значение. Адовый кошмар. |
Райский API: setItem, getItem. Всё просто, как три копейки. |
То же самое, что и у LocalStorage — просто и понятно. |
Так когда кого вызывать, чтобы не опозориться?
- Cookie: Это твой сессионный паспорт. Сюда — токены авторизации, ID сессии, какие-то мелкие настройки, которые нужны серверу. Больше 4 КБ не впихнёшь, да и не надо — он же с каждым запросом летит, как назойливая муха. Нахуй такую нагрузку?
- LocalStorage: Это твой личный сейф в браузере. Сюда складывай всё, что должно пережить перезагрузку страницы, закрытие браузера и даже приход тёщи: настройки темы (тёмная/светлая), кэш каких-то данных для оффлайна, состояние интерфейса. Данные тут — надолго.
- SessionStorage: Это блокнот для одной задачи. Открыл сложную форму на пять шагов — сохраняй состояние каждого шага сюда. Перешёл на другую вкладку — там уже своя сессия, свои данные. Закрыл вкладку с формой — и все промежуточные данные нахуй, как будто их и не было. Идеально для временщины.
Пример, как не облажаться с LocalStorage
Смотри, тут всё проще пареной репы:
// Запихнули данные в сейф
localStorage.setItem('theme', 'dark');
localStorage.setItem('userPrefs', JSON.stringify({ fontSize: 16, annoyingPopups: false }));
// Достали их обратно (осторожно, может быть null!)
const savedTheme = localStorage.getItem('theme'); // 'dark'
const prefs = JSON.parse(localStorage.getItem('userPrefs')); // { fontSize: 16, ... }
// Решили, что тема надоела — выкинули
localStorage.removeItem('theme');
// Всё охуели — очистили весь сейф
// localStorage.clear();Итог, чтобы два раза не вставать: Cookies — это для общения клиента с сервером, маленькие и назойливые. Web Storage (Local/Session) — это твоя клиентская база данных, большая и молчаливая. Она никуда сама не лезет, ждёт, когда к ней обратятся.
Выбирай с умом, а то потом будешь ебаться с лишним трафиком из-за куков или рыдать, что данные формы пропали.