Вы когда-нибудь задумывались, как вы искали лучшее шоколадное мороженое в вашем городе, а затем получали рекламу и рекомендации о нем на каждом веб-сайте? Кроме того, как браузер узнает, что вы уже вошли в систему? Если нет, то вам обязательно стоит узнать, как браузер это умеет.

Браузеры могут хранить и извлекать пользовательские данные с помощью различных опций. Владельцы веб-сайтов могут сохранять содержимое веб-сайтов или документы для использования в автономном режиме, сохранять пользовательские настройки, применять состояния и многое другое. В этом посте мы собираемся обсудить в основном локальное хранилище, хранилище сеансов и файлы cookie.

Локальное хранилище

Возможно, вы сталкивались с веб-сайтами, на которых вы вводите какой-либо текст и поле поиска, и в следующий раз, когда вы посещаете этот веб-сайт, он все еще содержит эти значения. Скорее всего, веб-сайт использует локальное хранилище для сохранения всех введенных вами текстов для дальнейшего использования. Другим примером могут быть формы на веб-сайте. Вы заметите, что формы автоматически заполняются вашим именем, адресом и т. д.

Локальное хранилище используется для хранения данных в вашем браузере для дальнейшего использования. JavaScript и HTML5 — единственные способы доступа к локальному хранилищу. При закрытии браузера данные не уничтожаются и доступны на следующий день, неделю или год — до тех пор, пока сайт или пользователь не удалит их. Однако пользователь может стереть данные/кеш браузера, чтобы очистить все данные локального хранилища.

Плюсы:

  • Для хранимых данных не устанавливается срок действия.
  • Предел хранилища составляет примерно 5 МБ.
  • При необходимости данные отправляются на сервер.

Минусы:

  • Открытый текст небезопасен по своей конструкции и ограничен строковыми данными, что требует сериализации.
  • Его можно прочитать только на стороне клиента.
  • Локальное хранилище доступно через JavaScript в том же домене. В результате любой JavaScript, работающий на вашем сайте, будет иметь доступ к веб-хранилищу, что делает его уязвимым для атак с использованием межсайтовых сценариев (XSS).

Пример:

// Write
localStorage.setItem(‘key’, ‘value’);
// Read
let data = localStorage.getItem(‘key’);
// Delete
localStorage.removeItem(‘key’);
// Delete all
localStorage.clear();

Хранилище сеансов

Итак, сегодня вы вошли в свою учетную запись электронной почты и забыли выйти. Завтра, когда вы попытаетесь получить доступ к своей учетной записи электронной почты, вы заметите, что вам не нужно снова входить в систему. Это хранилище сеансов в действии для вас. В недавнем проекте TopDoc мы использовали хранилище сеансов для хранения учетных данных вошедших в систему пользователей.

Доступное только для чтения поле хранилище сеанса относится к объекту Хранилище сеанса текущего источника. Данные никогда не передаются на сервер и доступны только на стороне клиента. Когда вы открываете несколько вкладок/окон с одним и тем же URL, хранилище сеансов создается для каждой вкладки/окна. Мы можем записывать пары ключ-значение в хранилище сеансов точно так же, как и в локальном хранилище.

Плюсы:

  • Предел хранилища составляет около 5–10 МБ.
  • Данные не являются постоянными, а это означает, что они доступны только для одного окна (или вкладки в таких браузерах, как Chrome и Firefox).
  • Данные доступны только пока пользователь находится на странице. Изменения, сделанные на текущей странице, сохраняются и доступны для будущих посещений сайта в той же вкладке/окне. Данные уничтожаются после закрытия вкладки/окна.

Минусы:

  • Данные доступны только в пределах окна/вкладки, где они были установлены.
  • Он следует политике того же источника, что и локальное хранилище. В результате сохраненные данные будут доступны только из одного и того же источника.

Пример:

// Write
sessionStorage.setItem(‘key’, ‘value’);
// Read
let data = sessionStorage.getItem(‘key’);
// Delete
sessionStorage.removeItem(‘key’);
// Delete all
sessionStorage.clear();

Файл cookie

Помните предыдущий пример, где я говорил о шоколадном мороженом? Да, это делает Куки. Нет, не ПЕЧЕНЬЕ, КОТОРОЕ ТЫ ЕШЕШЬ. Это файл cookie браузера. Торговые сайты также используют файлы cookie для отслеживания ранее просмотренных пользователями товаров, что позволяет сайтам предлагать другие товары, которые могут им понравиться, и оставлять товары в корзинах, пока они продолжают совершать покупки.

Если мы посмотрим на картинку выше, мы увидим, что на сайте появляется реклама. Эти виды рекламы связаны с историей просмотров, которая была у нас в прошлом. И по мере того, как мы продолжаем просматривать различные вещи в Интернете, эта реклама время от времени меняется.

Cookies — это текстовые файлы, содержащие небольшие фрагменты информации, такие как имя пользователя или местоположение, которые используются для идентификации вашего компьютера при подключении к Интернету. Файлы cookie HTTP используются для идентификации и улучшения вашего просмотра веб-страниц, позволяя вам идентифицировать конкретных пользователей. Это устаревший подход к хранению данных на клиентском компьютере. До HTML5 это был единственный вариант веб-хранилища. Посетители веб-сайтов могут воспользоваться файлами cookie, сделав свой опыт более персонализированным. Файлы cookie создаются на сервере и отправляются клиенту, а обмен данными происходит каждый раз при отправке запроса. Серверы могут использовать данные cookie для доставки персонализированного контента посетителям.

Плюсы:

  • Файлы cookie в основном предназначены для чтения на стороне сервера (также могут быть прочитаны на стороне клиента), локальное хранилище и хранилище сеансов могут быть прочитаны только на стороне клиента.
  • Установив флаг httpOnly в значение true для файла cookie, его можно сделать безопасным. Это предотвращает доступ клиента к куки. Объект document.cookie из объекта окна браузера можно использовать для обновления и установки файлов cookie.

Минусы:

  • Размер должен быть меньше 4 КБ.
  • Уязвимости файлов cookie включают подделку межсайтовых запросов (CSRF). Атаки CSRF происходят, когда вредоносный веб-сайт, электронная почта или блог заставляют веб-браузер пользователя выполнять нежелательное действие на доверенном сайте, на котором пользователь в настоящее время вошел в систему.

Пример:

// Write
document.cookie = “key=value”;
// Read
let x = document.cookie;
// Update
document.cookie = “key=new value”;
// Delete — for deletion you should set expiration parameter to past date
document.cookie = “expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

Помимо локального хранилища, хранилища сеансов и файлов cookie, у нас есть другие варианты, такие как кэш, WebSQL, IndexedDB и т. д. Но наиболее часто используются три типа хранилищ, которые мы обсуждали в этом блоге. И разработчику программного обеспечения очень важно знать об этом для разработки вашего проекта веб-приложения. И если вы не любите читать длинные блоги, подобные этому, я кратко изложил ниже все ключевые функции веб-хранилища.

Итак, в двух словах

Резюме

Крайне важно хранить пользовательские данные в безопасной среде. Любое нарушение безопасности может привести к утечке важной и конфиденциальной информации о пользователях хакерам. Следовательно, очень важно разумно выбирать между различными вариантами хранения данных в зависимости от конфиденциальности информации и вашего варианта использования.

Наша команда в StackMyBiz работала над многими веб-приложениями с использованием различных технологий. Мы оснащены всеми новейшими навыками, чтобы сопровождать вас в джунглях стартапов. Если вам нужна консультация или разработка приложений, не ищите дальше. Свяжитесь с нами!