В чем разница между cookie, localStorage и sessionStorage?

Различия между Cookie, localStorage и sessionStorage

Все три способа хранят данные на клиенте, но они различаются по своему назначению, сроку хранения, размеру и способу отправки данных. Выбор правильного способа критичен для безопасности и производительности приложения.

1. Cookie

Назначение: Первоначально созданы для отслеживания пользователя и хранения сессионных данных.

// Создание cookie
document.cookie = 'username=Alice; path=/';
document.cookie = 'theme=dark; path=/; max-age=' + (7 * 24 * 60 * 60); // 7 дней

// Чтение cookie
console.log(document.cookie); // "username=Alice; theme=dark"

// Удаление cookie (установить max-age на 0)
document.cookie = 'username=; max-age=0; path=/';

Характеристики:

• Размер: 4KB на cookie
• Срок хранения: Может быть постоянным (expires/max-age) или временным (до закрытия браузера)
• Отправка: АВТОМАТИЧЕСКИ отправляются на сервер с каждым HTTP запросом
• Область видимости: Можно ограничить по domain и path
• Доступ: JavaScript, сервер, сетевые запросы

// Пример установки cookie с параметрами
document.cookie = 'sessionId=abc123; path=/; domain=example.com; secure; samesite=Strict';

// secure — отправляется только по HTTPS
// samesite — защита от CSRF

Когда использовать:

• Аутентификация и сессии (tokens)
• Отслеживание пользователя
• Когда данные должны отправляться на сервер автоматически

2. localStorage

Назначение: Долгосрочное хранение данных на клиенте.

// Запись
localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));
localStorage.setItem('theme', 'dark');

// Чтение
const user = JSON.parse(localStorage.getItem('user'));
const theme = localStorage.getItem('theme');

// Проверка наличия
if (localStorage.getItem('user') !== null) {
  console.log('User is stored');
}

// Удаление одного элемента
localStorage.removeItem('user');

// Удаление всех данных
localStorage.clear();

// Количество элементов
console.log(localStorage.length);

// Перебор всех элементов
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

Характеристики:

• Размер: 5-10MB на домен (в зависимости от браузера)
• Срок хранения: Постоянный (пока не очищен пользователем или кодом)
• Отправка: НЕ отправляется на сервер автоматически
• Область видимости: Один домен/протокол/порт (origin)
• Доступ: Только JavaScript
• Синхронный: Блокирует поток при работе с большими объемами

// Реальный пример: сохранение настроек пользователя
function saveUserSettings(settings) {
  localStorage.setItem('userSettings', JSON.stringify(settings));
}

function loadUserSettings() {
  const stored = localStorage.getItem('userSettings');
  return stored ? JSON.parse(stored) : {};
}

// Использование
const settings = {
  theme: 'dark',
  language: 'en',
  fontSize: 14
};
saveUserSettings(settings);

const loaded = loadUserSettings();
console.log(loaded); // { theme: 'dark', language: 'en', fontSize: 14 }

Когда использовать:

• Пользовательские предпочтения (тема, язык)
• Кэширование данных
• Сохранение черновиков
• Отслеживание состояния приложения

3. sessionStorage

Назначение: Временное хранение данных для текущей сессии браузера.

// API идентичен localStorage
sessionStorage.setItem('currentStep', '2');
sessionStorage.setItem('formData', JSON.stringify({ name: 'Bob' }));

const step = sessionStorage.getItem('currentStep');
const data = JSON.parse(sessionStorage.getItem('formData'));

// Удаление
sessionStorage.removeItem('currentStep');
sessionStorage.clear();

Характеристики:

• Размер: 5-10MB на домен (как localStorage)
• Срок хранения: До закрытия вкладки/окна
• Отправка: НЕ отправляется на сервер
• Область видимости: Одна вкладка/окно (разные вкладки изолированы)
• Доступ: Только JavaScript

// Пример: сохранение состояния мастера (wizard)
class WizardState {
  static saveStep(step) {
    sessionStorage.setItem('wizardStep', step);
  }
  
  static getStep() {
    return sessionStorage.getItem('wizardStep') || '1';
  }
  
  static saveFormData(data) {
    sessionStorage.setItem('wizardFormData', JSON.stringify(data));
  }
  
  static getFormData() {
    const data = sessionStorage.getItem('wizardFormData');
    return data ? JSON.parse(data) : {};
  }
  
  static clear() {
    sessionStorage.removeItem('wizardStep');
    sessionStorage.removeItem('wizardFormData');
  }
}

Когда использовать:

• Временные данные в пределах одной сессии
• Состояние многошагового процесса (форма, мастер)
• Данные, которые не нужны после закрытия вкладки

Сравнительная таблица

Практический выбор

Используй Cookie для:

// Аутентификация и сессии
document.cookie = 'sessionToken=xyz789; secure; samesite=Strict';

// Отслеживание
document.cookie = 'userId=123; max-age=' + (30 * 24 * 60 * 60);

Используй localStorage для:

// Пользовательские настройки
localStorage.setItem('userPreferences', JSON.stringify({
  theme: 'dark',
  language: 'ru'
}));

// Кэш данных
localStorage.setItem('cachedArticles', JSON.stringify(articles));

Используй sessionStorage для:

// Состояние многошагового процесса
sessionStorage.setItem('checkoutStep', '3');

// Временные данные формы
sessionStorage.setItem('formDraft', JSON.stringify(formData));

Безопасность

Важные моменты:

1. Cookie — могут содержать чувствительные данные (используй flags: secure, httpOnly)
2. localStorage/sessionStorage — доступны для JavaScript, уязвимы для XSS

// ❌ ОПАСНО — никогда не сохраняй токены в localStorage
localStorage.setItem('authToken', 'xyz789');
// Если на сайт попадет XSS, злоумышленник получит доступ

// ✅ ЛУЧШЕ — сохраняй в httpOnly Cookie
// (устанавливается только на сервере)

Правильный выбор хранилища улучшает как функциональность, так и безопасность приложения.