Ответ
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: Для временного хранения данных в рамках одной сессии, например, содержимого полей формы, чтобы не потерять их при перезагрузке страницы.
Ответ 18+ 🔞
А, ну вот, опять эти ваши хранилища в браузере! LocalStorage, SessionStorage, Cookies — три богатыря, а толку, блядь, как от козла молока, если не понимать, кто для чего. Сейчас разжуём, но так, чтобы до самого позвоночника дошло.
Смотри сюда, таблица, мать её, сравнительная:
| Критерий | Cookies (старичок) | LocalStorage (слоник) | SessionStorage (одноразовый шприц) |
|---|---|---|---|
| Объём | Жалкие ~4 КБ, сосалка! | Целых ~5-10 МБ, овердохуища! | Тоже ~5-10 МБ, но на один раз. |
| Время жизни | Сам решаешь, когда сдохнет (Expires). |
Бессмертный, пока юзер вручную не почистит или скрипт не прибьёт. | Живёт, пока вкладка не захлопнется — бац и нету! |
| Доступность | По всему браузеру шастает, куда хочет. | Только в этой вкладке/окне, как в клетке. | Вообще только в этой одной конкретной вкладке, хитрая жопа. |
| Лезет к серверу? | Да, сука, с каждым чихом, с каждым запросом — тут как тут, на шее висит! | Никогда! Сидит тихо, пока JS его за шкирку не вытащит. | Тоже нихуя, только по вызову скрипта. |
| Как общаться | Через document.cookie — древний и неудобный. |
localStorage.setItem('ключ', 'значение') — красота! |
sessionStorage.setItem('ключ', 'значение') — так же просто. |
Ну и куда это всё пихать, спрашивается?
- Cookies: Это твой курьер до сервера. Всё, что должно туда долетать автоматически — сессионные айдишники, токены, чтоб тебя не выгнали с сайта. Для этого и создан, ёпта.
- LocalStorage: Это твой личный склад на чердаке. Скинул туда тему сайта (тёмную, светлую), настройки — и хоть через год зайди, всё на месте. Постоянная память, блядь.
- SessionStorage: Это как запись на руке. Заполнил длинную форму, испугался, перезагрузил страницу — а она, сука, не пропала, потому что временно сохранили. Но как только вкладку закрыл — всё, ядрёна вошь, стирается!
Вот и вся философия. Не усложняй, выбирай инструмент по делу, а не потому что первый в списке попался.