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

Разница между Cookie и localStorage

Таблица сравнения

Cookie: Все о куках

Cookie — это небольшой текстовый файл, который сервер отправляет браузеру, и браузер автоматически отправляет его обратно в каждом HTTP запросе.

Как это работает:

// На сервере (Node.js/Express)
res.cookie('sessionId', '12345', {
  httpOnly: true,        // Защита от XSS
  secure: true,          // Только HTTPS
  sameSite: 'strict',    // Защита от CSRF
  maxAge: 3600000        // 1 час в миллисекундах
});

// Браузер автоматически отправляет в следующих запросах:
// Cookie: sessionId=12345

Типы Cookie:

// 1. Session Cookie (удаляется при закрытии браузера)
res.cookie('tempData', 'value');

// 2. Persistent Cookie (живёт определённое время)
res.cookie('rememberMe', 'value', { maxAge: 7 * 24 * 60 * 60 * 1000 });

// 3. Third-party Cookie (отправляются на другие домены) — используются для трекинга
// <img src="https://analytics.com/track?id=user123" />

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

// Хорошее устанавливание куки на сервере:
res.cookie('auth_token', token, {
  httpOnly: true,    // ✅ JS не может получить значение
  secure: true,      // ✅ Отправляется только по HTTPS
  sameSite: 'strict', // ✅ Защита от CSRF атак
  path: '/',
  domain: '.example.com' // ✅ Ограничение домена
});

// Плохое (уязвимо для XSS):
res.cookie('token', token); // ❌ Любой JS скрипт может украсть

localStorage: Локальное хранилище браузера

localStorage — это хранилище в браузере для сохранения данных конкретного домена, которое не удаляется при закрытии браузера.

Как это работает:

// Сохранение
localStorage.setItem('userName', 'Ivan');
localStorage.setItem('preferences', JSON.stringify({ theme: 'dark' }));

// Получение
const name = localStorage.getItem('userName'); // 'Ivan'
const prefs = JSON.parse(localStorage.getItem('preferences')); // {theme: 'dark'}

// Удаление
localStorage.removeItem('userName');
localStorage.clear(); // Удалить всё

// Проверка количества элементов
console.log(localStorage.length); // Количество ключей

localStorage не отправляется на сервер:

// На клиенте
localStorage.setItem('token', 'abc123');

// На сервере (Node.js)
app.get('/api/user', (req, res) => {
  // req.headers.cookie НЕ содержит localStorage! ❌
  console.log(req.headers.cookie); // undefined
});

// Нужно отправить самостоятельно
fetch('/api/user', {
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
});

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

Используй Cookie когда:

• Сохраняешь сессию аутентификации (sessionId)
• Нужна автоматическая отправка на сервер
• Требуется HttpOnly флаг для безопасности (предотвращение XSS)
• Нужна защита от CSRF (SameSite флаг)
• Хранишь данные, которые должен проверять сервер

// Правильно: аутентификация в cookie
res.cookie('sessionId', token, { httpOnly: true, secure: true });

Используй localStorage когда:

• Сохраняешь предпочтения пользователя (тема, язык)
• Хранишь данные для отображения на клиенте (список избранного)
• НЕ нужна автоматическая отправка на сервер
• Нужен большой размер хранилища (>4KB)
• Данные касаются только клиентской части приложения

// Правильно: предпочтения пользователя
localStorage.setItem('theme', 'dark');
localStorage.setItem('language', 'ru');

Практический пример в Node.js приложении

// Сервер устанавливает cookie сессии
app.post('/login', (req, res) => {
  const token = generateToken();
  res.cookie('sessionId', token, { 
    httpOnly: true,  // Браузер автоматически отправит
    secure: true,
    sameSite: 'strict'
  });
  res.json({ message: 'Logged in' });
});

// Браузер сохраняет токен для отправки запросов
// Используется для других операций (уже в каждом запросе)
app.get('/profile', (req, res) => {
  const sessionId = req.cookies.sessionId;
  // Проверка сессии на сервере
});

// Клиент сохраняет пользовательские данные
localStorage.setItem('userId', '12345');
localStorage.setItem('preferences', JSON.stringify({
  notifications: true,
  theme: 'dark'
}));

Итоговая рекомендация

• Cookie — для критичной информации, которой управляет сервер (аутентификация)
• localStorage — для некритичных данных, которыми управляет клиент (UI состояние)
• Никогда не сохраняй секреты (пароли, API ключи) в localStorage — используй только HttpOnly Cookie