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

Печенье

Что такое файлы cookie?

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

Данные, хранящиеся в файле cookie, создаются сервером при вашем подключении. Эти данные помечены уникальным идентификатором сеанса для вас и вашего компьютера. Они хранятся для каждого домена, думайте о них как о сегментах файлов cookie, например, когда вы посещаете example.com, вы получаете определенный файл cookie для example.com. все файлы cookie, созданные на example.com, будут отправлены на example.com ведро и так далее. По умолчанию, если вы создаете файл cookie, он будет доступен только в пределах домена и будет отправлен только в тот же домен. Свойства файлов cookie Отправляются с каждым запросом на сервер. Когда файл cookie обменивается между вашим компьютером и сетевым сервером, сервер считывает идентификатор сеанса и знает, какую информацию конкретно предоставить вам.

Для чего используются файлы cookie?

  • Управление сеансом. Например, файлы cookie позволяют веб-сайтам распознавать пользователей и запоминать их индивидуальную информацию для входа и предпочтения.
  • Персонализация. Персонализированная реклама — это основной способ использования файлов cookie для персонализации ваших сеансов. Вы можете просматривать определенные элементы или части сайта, а файлы cookie используют эти данные для создания целевой рекламы, которая может вам понравиться.
  • Отслеживание. Торговые сайты используют файлы cookie для отслеживания ранее просмотренных пользователями товаров, что позволяет сайтам предлагать другие товары, которые могут им понравиться, и оставлять товары в корзинах, пока они продолжают совершать покупки.

Типы файлов cookie

1. Сеансовые файлы cookie:после закрытия браузера они «удаляются».

2. постоянный файл cookie:остается на компьютере на неопределенный срок, хотя многие из них имеют дату истечения срока действия и автоматически удаляются по истечении этой даты.

3. httponly cookie:Невозможно получить к нему доступ из браузера, чтобы защитить вас от хакеров.

4. безопасный файл cookie: гарантирует, что данные будут передаваться только по протоколу HTTPS.

5. Собственные файлы cookie: создаются непосредственно используемым вами веб-сайтом.

6. Сторонние файлы cookie:вызывают больше беспокойства. Они генерируются веб-сайтами, которые отличаются от веб-страниц, которые пользователи просматривают в данный момент, обычно потому, что они связаны с рекламой на этой странице. Посещение сайта с 5 объявлениями может привести к созданию 5 файлов cookie, даже если пользователи никогда не нажимают на эти объявления.

7. Зомби-файлы cookie:воссоздаются даже после того, как пользователи удалят их, электронные теги с сервера Cookie Security.

Почему файлы cookie могут быть опасны?

1. Кража файлов cookie: внедрение XSS-скрипта.

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

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

Что такое localStorage?

LocalStorage – это свойство, которое позволяет сайтам и приложениям JavaScript сохранять пары "ключ-значение" в веб-браузере без ограничения срока действия. Это означает, что данные, хранящиеся в браузере, будут сохраняться даже после закрытия окна браузера. При использовании локального хранилища данные не передаются между клиентом и сервером (если только это не делается явным образом в коде). Это отлично подходит для уменьшения размера полезной нагрузки. Файлы cookie, с другой стороны, передаются в виде поля заголовка HTTP с каждым запросом в заданном домене. Пользователи «не должны» получать доступ к локальным данным и изменять их напрямую, но ничто не мешает им это делать.

Безопасно ли использовать LocalStorage?

  1. Разработчики не могут контролировать локально хранящиеся данные.При использовании локального хранилища нет серверной базы данных, над которой разработчик может контролировать. Таким образом, разработчик не может обновить код после его сохранения. Пользователю потребуется либо вручную удалить файл, либо очистить кеш браузера, что приведет к потере всех сохраненных данных.
  2. Подделка межсайтовых запросов.Хранение чего-то конфиденциального, например пароля, в файле локального хранилища фактически упрощает процесс для хакера, поскольку ему не нужно загружать файл cookie в свою собственный браузер.

Не храните конфиденциальные данные, такие как пароли или номера кредитных карт, в локальном хранилище!

Как использовать LocalStorage?

// store a value
localStorage.setItem( 'name', 'Xyass' );
// retrieve a value
localStorage.getItem( 'name' );
// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var info = {
job: 'developer',
author: 'Xyass'
}
localStorage.setItem( 'info', JSON.stringify( info ) );
// and to retrieve
var post = JSON.parse( localStorage.getItem( 'info' ) );

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

Что такое sessionStorage?

SessionStorage хранит данные только для сеанса, если у вас есть несколько вкладок или окон с одним и тем же URL, браузер создает отдельное sessionStorage для каждой из них. , поэтому сохраненные данные на вкладке браузера не могут быть доступны на другой вкладке. SessionStorage будет удален при закрытии браузера. Такжедоступно только при запросе страницы с сервера, так как данные привязаны к сеансу сервера,

Когда использовать sessionStorage?

Некоторые случаи, когда мы можем использовать sessionStorage:

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

— Делитесь необходимыми пользовательскими настройками на каждой странице, такими как макет или шаблон.

— Действие, которое вы хотите, чтобы пользователь выполнял один раз за вход.

Как использовать SessionStorage?

// Storing data in the sessionStorage
sessionStorage.setItem( 'name', 'Xyass' );
// retrieve a value
sessionStorage.getItem( 'name' );
// remove the value
sessionStorage.removeItem( 'name' );
// Deleting all items in the sessionStorage
sessionStorage.clear();

Заключение

Очевидно, что если данные, которые вы храните, должны быть доступны на постоянной основе, тогда localStorage предпочтительнее, чем sessionStorage — хотя вы должны отметить, что оба могут быть очищены пользователем, поэтому вам не следует полагаться на постоянное существование данных в любом случае. Также localStorage и sessionStorage идеально подходят для хранения неконфиденциальных данных.

Вот таблица, которая дает вам подробное сравнение между тремя: