Интерфейсный разработчик, не понимающий, где можно хранить простые данные "ключ-значение"? Ваш код запутан до такой степени, что теперь у вас возникают дилеммы, где достаточно безопасно хранить пользовательскую информацию?
Наш блог о локальном хранилище во внешнем интерфейсе может пролить свет на лучшие практики, которые необходимо внедрить. Продолжайте, прочтите и дайте нам знать ваш ценный вклад в разделе комментариев.
Итак, начнем с основ.
В любительских терминах это означает набор приложений, которые предоставляют интерфейсным веб-разработчикам доступ к хранилищу данных. Таким образом, данные будут храниться на стороне клиента, что последовательно помогает ускорить работу веб-приложений и снижает сложность составных запросов к базе данных на сервере.
До того, как появилась концепция LocalStorage, разработчикам, которые хотели накапливать данные на клиентской стороне, требовались файлы cookie браузера. Единственным недостатком было то, что cookie может хранить только 4096 байт данных. Кроме того, каждый раз, когда cookie отправлялся на сервер, клиент делал HTTP-запрос. Это означало, что размер запросов продолжал расти экспоненциально, что приводило к более высокому использованию полосы пропускания и более медленному времени запросов.
Как мы храним данные в LocalStorage?
Хранение данных в LocalStorage означает, что информация пользователя может быть захвачена и сохранена на его стороне. У этих данных не будет срока действия и они будут сохраняться даже после закрытия окна браузера.
Простым примером, когда LocalStorage повышает производительность пользователя, может быть классический случай сохранения данных о пользовательских предпочтениях (цвета темы на веб-сайте) или сохранения элементов корзины на веб-сайте электронной коммерции и т. Д. Размер хранилища - еще одна вишенка на торте. Из всего объема хранилища размером 4 КБ с использованием файлов cookie локальное хранилище обеспечит как минимум 5 МБ хранилища данных в различных веб-браузерах.
Изображение загруженной тележки в соответствии с предпочтениями клиента
На практике локальное хранилище - это большой традиционный объект JavaScript, из которого вы можете сохранять или удалять данные.
Вот пример кода JavaScript, который мы использовали в продукте Pickyourtrail, который сохраняет информацию в локальном хранилище, возвращает ее нам, а затем удаляет ее:
Шаг 1. Первоначально мы устанавливаем функцию localStorage
Шаг 2. Проверка соответствия ключа правильному значению, которое мы установили
Шаг 3. Предупреждение с установленным сообщением
Шаг 4. Удаление localStorage в том же коде
Шаг 5. Проверка, был ли удален localStorage
Шаг 6. Предупреждающее сообщение с неопределенными значениями
Допустим, вы создаете статический сайт (например, одностраничное приложение - в нашем случае с помощью React), используя что-то вроде локального хранилища, позволяющее веб-страницам работать независимо на любых веб-серверах. В этом случае необходимость в внутреннем языке или логике для хранения данных в браузере не является обязательной.
Очевидная причина, по которой разработчики сходят с ума по этой концепции, верно?
Продукт Pickyourtrail собирает информацию о пользователях, начиная с их интересов и кончая паспортными данными, и выполняет бронирование отпуска. Однако мы не используем локальное хранилище для хранения конфиденциальной информации о пользователях или их сеансах. Они удаляются и обрабатываются как файлы cookie ТОЛЬКО HTTP с нашего веб-сервера.
Локальное хранилище используется с нашей стороны для обмена информацией между страницами / маршрутами, а также для сохранения той же информации после каждой загрузки страницы.
Иногда необходимо хранить общедоступную информацию, чтобы улучшить взаимодействие с пользователем.
Интересное чтиво: Решите вашу медленную загрузку страницы!
* Вам необходимо постоянно хранить резервную копию данных, чтобы предотвратить потерю
* Вы несете полную ответственность за защиту данных.
* Совместное использование данных затруднено, поскольку вам необходимо загрузить их на размещенный сервер, а затем поделиться ими с назначенным пользователем.
* Использует больше места для хранения, если вы храните локально
* Хранение данных только строкового типа
* Это синхронный процесс, что означает, что каждая выполняемая вами операция с локальным хранилищем будет выполняться по одной за раз.
* Он ограничивает объем данных, которые вы можете сохранить, примерно до 5 МБ во всех основных браузерах.
Ищете альтернативы? Ага, мы вас поймали!
1. Чтобы сохранить конфиденциальные данные, используйте сеанс на стороне сервера.
Объявления с конфиденциальными данными:
- ID пользователей
- Идентификаторы сеанса
- JWT
- Персональные данные
- Информация о кредитной карте
- Ключи API и все остальное, что вы не хотели бы делать общедоступным.
Примечание.
Сеанс на стороне сервера - это еще одно название для файлов cookie на стороне сервера. Веб-сайт хранит в браузере единственный файл cookie, содержащий единственный идентификатор сеанса.
2. Для хранения нестроковых данных
Если с вашей стороны возникает потребность в хранении данных в браузере, и эти данные не являются конфиденциальными и представляют собой частичные строковые данные, лучшим вариантом будет IndexedDB.
Брауни-баллы за использование IndexedDB
- Сохранение правок без необходимости мгновенно синхронизировать изменение каждого отдельного символа с сервером.
- Синхронизация сервера, когда пользователь открывает браузер в следующий раз, и публикация изменений, сделанных в его предыдущем сеансе.
- Чтобы избежать перезагрузки шрифтов или ресурсов изображений при каждом обновлении или перезагрузке страницы.
- Может работать с объектами типа базы данных, хранящимися в браузере.
- Вы можете воспользоваться услугами IndexedDB с Cache API, если планируете запускать приложение в автономном режиме. Теперь этот Cache API позволит кэшировать сетевые ресурсы приложения и BAM! Необходимые данные у вас с собой!
С учетом всего вышесказанного, используете ли вы LocalStorage каким-либо интересным образом в своих планах проекта? Сообщите нам об этом в комментариях ниже.
Собираетесь в международную поездку? Ага, позвони нам прямо сюда!
