Как работает localStorage, sessionStorage и cookies?

Вопрос

Чем отличаются localStorage, sessionStorage и cookies?

Короткий ответ

Все три хранят данные на клиенте в виде строк, но отличаются временем жизни, объёмом и тем, отправляются ли они на сервер: localStorage живёт вечно, sessionStorage — до закрытия вкладки, а cookies — единственные, которые автоматически уходят на сервер с каждым HTTP-запросом.

Подробный ответ

• localStorage — хранит данные без срока действия (пока не удалят вручную или через clear()). Данные доступны во всех вкладках одного источника (origin). Объём — обычно ~5-10 МБ. Доступен только через JavaScript, на сервер не отправляется.
• sessionStorage — тот же API, что у localStorage, но данные живут только в рамках одной вкладки и удаляются при её закрытии. Разные вкладки одного сайта не делят между собой sessionStorage.
• Cookies — исторически старейший механизм. Ключевое отличие: cookies автоматически прикрепляются к каждому HTTP-запросу на тот же домен (если не ограничены path/domain), что делает их пригодными для аутентификации на сервере, но увеличивает вес каждого запроса. Объём — ~4 КБ на cookie. Имеют собственный срок жизни (expires/max-age) и флаги безопасности:
  • HttpOnly — недоступна из JavaScript (защита от XSS).
  • Secure — передаётся только по HTTPS.
  • SameSite — ограничивает отправку cookie при кросс-сайтовых запросах (защита от CSRF).

Важно для SSR (Nuxt): localStorage/sessionStorage существуют только в браузере и недоступны на сервере, а cookies доступны и на сервере (через заголовки запроса), поэтому именно cookies обычно используют для хранения токена аутентификации в SSR-приложениях.

Пример

// localStorage — переживает закрытие браузера
localStorage.setItem('theme', 'dark')
localStorage.getItem('theme') // 'dark' даже после перезапуска браузера

// sessionStorage — умирает вместе с вкладкой
sessionStorage.setItem('draft', 'черновик комментария')

// cookie — можно ограничить временем жизни и уходит на сервер
document.cookie = 'token=abc123; max-age=3600; Secure; SameSite=Strict'

Дополнительные вопросы

• Почему токен аутентификации в SSR-приложении часто хранят в cookie, а не в localStorage?
• Что такое HttpOnly и от какой атаки он защищает?
• Как SameSite=Strict/Lax/None влияет на отправку cookie при переходе с другого сайта?