tgoop.com/prog_way_blog/135
Last Update:
Где хранить данные на клиенте
Web-приложения сейчас — это уже давно не обычные странички для отображения текста. Сейчас почти каждое приложение обладает авторизацией, собственным состоянием и часто манипулирует с данными. Сохраняет их, обрабатывает и выдаёт пользователю какой-то результат. Сегодня поговорим о том, как и где можно сохранить данные на клиенте.
Мне известно 4 способа: LocalStorage, SessionStorage, IndexedDB и Cookies. И я ранее уже делал посты с более подробным объяснение что такое LocalStorage, SessionStorage и Cookies. В этом посте мы разберемся не в том что это такое, а в каких ситуациях и что использовать.
Итак, если с LocalStorage, SessionStorage и Cookies всё плюс минус понятно после прочтения моих прошлых постов, то с IndexedDB появляется проблема: я ни разу не видел IndexedDB на практике 🤔 Информации в интернете тоже не особо много, так что тут мы затронем этот способ только косвенно. Также не будем трогать штуки типа MobX, Redux и так далее. Остановимся только на нативных инструментах.
Для вас я приготовил характеристическую таблицу-сравнение этих способов. Ознакомиться с ней можно по ссылке. Таблица, как говорили в СССР про квартиру — маленькая, зато своя.
Далее же в посте я разберу частые примеры:
1. Аутентификация — cookies.
Аутентификация, по большей части, работа серверная. Сервер должен решать авторизован ли пользователь, получая какие-то исходные данные, и понимать, отдавать информацию или нет. Cookies отправляются на сервер с каждым запросом без исключения, поэтому часто в cookies сидит httpOnly токен авторизации. LocalStorage тут лучше не использовать из-за того, что это менее безопасно и сервер не имеет доступа к LocalStorage, что важно для скорости и отказоустойчивости.
2. Сохранение корзины пользователя — cookies или LocalStorage.
Если нам не важно что в корзине у пользователя, то LocalStorage - наш вариант, потому что это никак не нагружает соединение и позволяет сохранять DTO без последствий. На безопасность наплевать. Если злоумышленник получит JSON корзины, то что? Cookies тоже жизнеспособный вариант, но корзина нужна далеко не на всех страницах сайта, так что трафик будет излишне нагружен. Если необходимо сохранить корзину на сервере, то лучше создать для этого отдельный CRUD-endpoint и использовать REST Api.
3. Метрики — cookies. Нужны всегда и нужны на сервере.
4. Сохранить данные формы — LocalStorage или SessionStorage. На сервере нам это не нужно.
5. Фильтры на сайте — cookies или SessionStorage.
Для фильтров жизненный цикл сессии — идеален. LocalStorage хранит эти данные слишком долго. Сессия же хранит файлы столько, сколько нужно, не нагружая соединение. Ну и так же фильтры не нужны на всех страницах.
В итоге, панацеи нет. Есть несколько вариантов и под каждую из ситуаций просто нужно выбрать свой. И на этом у меня всё. Спасибо за прочтение, это важно для меня.
#web #theory #useful #data
BY progway — программирование, IT
Share with your friend now:
tgoop.com/prog_way_blog/135