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

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

У меня есть опыт работы на фронте, и это важно понимать backend разработчику. Объясню подробно.

Cookies

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

// Создание cookie на сервере
res.setHeader('Set-Cookie', 'sessionId=abc123; Path=/; HttpOnly; Secure');

// На клиенте
document.cookie = 'theme=dark; max-age=3600';

// Cookie автоматически отправляется на сервер
// GET /api/users
// Header: Cookie: sessionId=abc123; theme=dark

Размер: 4 KB на cookie (максимум 180 cookies на домен)

Время жизни:

• Session cookie (без expiration) — удаляется когда браузер закроется
• Persistent cookie (с expiration) — живёт до даты expiration

SessionStorage

SessionStorage — это JavaScript хранилище в браузере. Данные НЕ отправляются на сервер.

// Создание
sessionStorage.setItem('theme', 'dark');
sessionStorage.setItem('user', JSON.stringify({ id: 1, name: 'Ivan' }));

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

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

Размер: 5-10 MB (зависит от браузера)

Время жизни: Удаляется когда закроется tab (не весь браузер, а конкретная вкладка)

Comparison Table

Практические примеры

Пример 1: Аутентификация (Cookies)

// Backend
app.post('/api/login', (req, res) => {
  const token = generateToken(user);
  
  // Отправляем токен в cookie
  res.setHeader('Set-Cookie', `
    token=${token};
    Path=/;
    HttpOnly;
    Secure;
    SameSite=Strict;
    Max-Age=${7 * 24 * 60 * 60} // 7 дней
  `);
  
  res.json({ success: true });
});

// Frontend не видит token (HttpOnly)
// Но браузер автоматически отправляет его в каждом запросе
fetch('/api/users', { credentials: 'include' });
// Header: Cookie: token=...

// Backend проверяет
app.use((req, res, next) => {
  const token = req.cookies.token;
  if (!token) return res.status(401).send('Unauthorized');
  // ...
});

Пример 2: UI State (SessionStorage)

// Frontend: сохраняю состояние UI
function App() {
  const [theme, setTheme] = useState(() => {
    return sessionStorage.getItem('theme') || 'light';
  });
  
  const handleThemeChange = (newTheme) => {
    setTheme(newTheme);
    sessionStorage.setItem('theme', newTheme); // сохраняю локально
  };
  
  return (
    <div className={theme}>
      <button onClick={() => handleThemeChange('dark')}>Dark</button>
    </div>
  );
}

// При перезагрузке страницы тема восстанавливается
// При закрытии tab — удаляется

Пример 3: CSRF защита (Cookies + Token)

// Backend
app.post('/api/transfer-money', (req, res) => {
  const csrfToken = req.headers['x-csrf-token'];
  
  // Проверяю что token из header совпадает с cookie
  if (req.cookies.csrfToken !== csrfToken) {
    return res.status(403).send('CSRF attack blocked');
  }
  
  // Процесс перевода денег
});

// Frontend
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
fetch('/api/transfer-money', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken // отправляю в header
  }
});

// Почему это защита?
// - Cookie автоматически отправляется
// - Но header нельзя установить из другого домена (CORS)
// - Поэтому cross-site form attack невозможен

LocalStorage vs SessionStorage

Часто путают. Добавлю для полноты:

// SessionStorage — удаляется при закрытии tab
sessionStorage.setItem('activeTab', 'home');
// При перезагрузке: сохраняется
// При закрытии tab: удаляется

// LocalStorage — постоянно
localStorage.setItem('savedPassword', 'xxx'); // БЕЗ ЭТОГО!
localStorage.setItem('theme', 'dark');
// При перезагрузке: сохраняется
// При закрытии браузера: сохраняется
// Удаляется только вручную или clear cache

// Cookies — отправляются на сервер
document.cookie = 'sessionId=abc123';
// Отправляются на сервер
// Можно установить httpOnly (недоступно JavaScript)

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

Cookies (HttpOnly):

res.setHeader('Set-Cookie', 'token=abc; HttpOnly; Secure; SameSite=Strict');
// HttpOnly: JavaScript не может прочитать
// Защита от XSS (если хакер всё равно выполнит JS, не получит токен)
// Secure: отправляется только по HTTPS
// SameSite: защита от CSRF

SessionStorage:

sessionStorage.setItem('user', JSON.stringify(user));
// Уязвимо для XSS
// Если <script>alert(sessionStorage.getItem('user'))</script> выполнится,
// хакер получит данные

// Поэтому НЕ сохраняй чувствительные данные в sessionStorage!

Использование в реальных приложениях

Cookies нужны для:

• Аутентификация (sessionId, JWT, etc)
• CSRF защита
• Tracking (analytics)
• Preferences которые нужны на сервере

SessionStorage нужен для:

• Временное состояние UI (выбранная tab, форма draft)
• Данные которые нужны только клиенту
• Кэш на текущую сессию
• Не отправляем на сервер

Реальный пример: Modern Auth

// Backend
app.post('/api/auth/login', (req, res) => {
  const tokens = generateTokens(user);
  
  // Refresh token в secure cookie (долгоживущий)
  res.setHeader('Set-Cookie', `
    refreshToken=${tokens.refresh};
    Path=/;
    HttpOnly;
    Secure;
    SameSite=Strict;
    Max-Age=${30 * 24 * 60 * 60}
  `);
  
  // Access token в body (недолгоживущий, вернуть клиенту)
  res.json({ 
    accessToken: tokens.access,
    expiresIn: 900 // 15 минут
  });
});

// Frontend
function useAuth() {
  const [accessToken, setAccessToken] = useState(null);
  
  const login = async (email, password) => {
    const res = await fetch('/api/auth/login', { 
      method: 'POST',
      credentials: 'include', // отправляю cookies
      body: JSON.stringify({ email, password })
    });
    
    const { accessToken } = await res.json();
    setAccessToken(accessToken);
    
    // Сохраняю accessToken в памяти (или sessionStorage)
    sessionStorage.setItem('accessToken', accessToken);
  };
  
  const api = (url, options = {}) => {
    return fetch(url, {
      ...options,
      headers: {
        ...options.headers,
        'Authorization': `Bearer ${accessToken}`
      },
      credentials: 'include' // отправляю refreshToken cookie
    });
  };
  
  return { login, api };
}

Выводы

Cookies:

• Используй для аутентификации (с HttpOnly)
• Автоматически отправляются на сервер
• Сложнее манипулировать
• Нужно помнить о CSRF защите

SessionStorage:

• Используй для UI state
• НЕ отправляются на сервер
• Легко манипулировать
• Удаляются при закрытии tab

Правило: Если данные нужны на сервере → Cookies. Если нужны только клиенту → SessionStorage.