Когда новичок начинает изучать фронтенд, всё выглядит довольно просто.
Нужно сохранить данные в браузере?
Ну окей.
Есть cookie.
Есть localStorage.
Есть sessionStorage.
Какая разница? 🤔
На практике именно здесь многие начинают путаться.
💡 Представьте три ящика.
В каждый можно положить данные.
Но работают они по-разному.
🍪 Cookie
Самый старый способ хранения данных.
Когда браузер отправляет запрос на сервер, cookie могут автоматически отправляться вместе с ним.
Именно поэтому через них часто работают:
✅ авторизация
✅ сессии
✅ настройки пользователя
Но есть минус.
Cookie маленькие по размеру и постоянно путешествуют между браузером и сервером.
Поэтому хранить там большие объёмы данных — плохая идея.
📦 localStorage
Это уже просто хранилище внутри браузера.
Записал данные.
Закрыл вкладку.
Закрыл браузер.
Перезагрузил компьютер.
Данные остались.
Пока сам не удалишь или пользователь не очистит браузер.
Поэтому там часто хранят:
✅ тему оформления
✅ настройки приложения
✅ данные, которые должны жить долго
⚡️ sessionStorage
Похож на localStorage.
Но живёт только пока открыта вкладка.
Закрыл вкладку?
Данные исчезли.
Открыл сайт заново?
Хранилище пустое.
Поэтому sessionStorage часто используют для временных данных текущей сессии.
😅 А теперь классическая ошибка новичка.
Он хранит токен авторизации в localStorage.
Потом читает статью про безопасность.
Потом другую.
Потом третью.
И внезапно понимает, что в мире фронтенда даже вопрос «где хранить токен» способен вызвать настоящую религиозную войну.
🔥 Если сильно упростить:
🍪 Cookie — умеют общаться с сервером.
📦 localStorage — хранит данные долго.
⚡️ sessionStorage — хранит данные до закрытия вкладки.
Именно поэтому они существуют одновременно.
Они не конкурируют друг с другом.
Они решают разные задачи.
💬 А что вас впервые запутало сильнее: cookie, localStorage или история про хранение JWT-токенов? 😄