Ответ
LocalStorage, SessionStorage и Cookies — это механизмы хранения данных в браузере на стороне клиента, но они различаются по объёму, времени жизни и области применения.
Сравнительная таблица:
| Критерий | Cookies | LocalStorage | SessionStorage |
|---|---|---|---|
| Объём | ~4 КБ | ~5-10 МБ | ~5-10 МБ |
| Время жизни | Устанавливается вручную (Expires/Max-Age) |
Постоянно (до ручной очистки) | На время сессии (до закрытия вкладки) |
| Доступность | В рамках всего браузера | В рамках окна/вкладки | Только в текущей вкладке |
| Отправка на сервер | Автоматически с каждым HTTP-запросом | Никогда (только по запросу JS) | Никогда (только по запросу JS) |
| API | document.cookie |
localStorage.setItem() / getItem() |
sessionStorage.setItem() / getItem() |
Когда что использовать:
- Cookies: Для хранения данных, которые должны быть доступны на сервере, например, для аутентификации (сессионные ID, JWT-токены).
- LocalStorage: Для сохранения пользовательских настроек, тем оформления или данных, которые должны сохраняться между сессиями.
- SessionStorage: Для временного хранения данных в рамках одной сессии, например, содержимого полей формы, чтобы не потерять их при перезагрузке страницы.