Ответ
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 — это клиентская база данных ключ-значение для хранения больших объемов информации, не покидающей браузер.