Обзор
Cookies, localStorage и sessionStorage — это три механизма хранения данных в браузере, каждый из которых подходит для разных случаев использования.
Емкость хранилища
- Cookies: ограничены примерно
4KB
- localStorage: поддерживают примерно
5–10MB
- sessionStorage: поддерживают примерно
5–10MB
Сохранение данных
- Cookies: настраиваемы — они могут иметь явную дату истечения или истекать при закрытии браузера (сессионные cookies)
- localStorage: данные сохраняются бессрочно, пока пользователь или код приложения не очистит их вручную
- sessionStorage: данные автоматически удаляются при закрытии вкладки или окна браузера
Доступность на сервере
- Cookies: автоматически отправляются с каждым HTTP-запросом, благодаря чему доступны на стороне сервера — удобно для токенов аутентификации
- localStorage и sessionStorage: никогда не отправляются на сервер; они работают только на стороне клиента и подчиняются политике одного источника
Влияние на производительность
Все три storage API являются синхронными, то есть операции чтения/записи блокируют главный поток. Если нужно хранить большие объёмы данных, рассмотри IndexedDB, который работает асинхронно и не влияет на производительность UI.
Когда использовать каждый
- Используй cookies для данных на стороне сервера, таких как ID сессии или токены аутентификации
- Используй localStorage для постоянных клиентских настроек (например, тема оформления)
- Используй sessionStorage для временных данных, привязанных к вкладке (например, состояние многошагового формы)