1. LocalStorage

   Плюсы:

   1. Веб-хранилище можно рассматривать упрощенно как усовершенствование файлов cookie, обеспечивая гораздо большую емкость. Если вы посмотрите на исходный код Mozilla, мы увидим, что 5120 КБ (5 МБ, равный 2,5 миллионам символов в Chrome) является размером хранилища по умолчанию для всего домена. Это дает вам значительно больше возможностей для работы, чем обычный cookie 4 Кбайт.
   2. Данные не отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т.д.) - уменьшение количества трафика между клиентом и сервером.
   3. Данные, хранящиеся в localStorage, сохраняются до явного удаления. Сделанные изменения сохраняются и доступны для всех текущих и будущих посещений сайта.

   Минусы:

   1. Он работает по политике одного и того же происхождения. Таким образом, сохраненные данные будут доступны только по одному и тому же происхождению.

2. Печенье

   Плюсы:

   1. По сравнению с другими, ничего AFAIK.

   Минусы:

   1. Предел 4K предназначен для всего файла cookie, включая имя, значение, дату истечения срока годности и т.д. Чтобы поддерживать большинство браузеров, сохраните имя до 4000 байт и общий размер файла cookie под 4093 байтами.

   2. Данные отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т.д.) - увеличение количества трафика между клиентом и сервером.

      Как правило, допускается следующее:

      • Всего 300 куки
      • 4096 байт за куки файл
      • 20 файлов cookie для домена
      • 81920 байт на домен (задано 20 файлов cookie максимального размера 4096 = 81920 байт).

3. sessionStorage

   Плюсы:

   1. Он похож на localStorage.
   2. Данные не являются постоянными, т.е. Данные доступны только для каждого окна (или вкладки в браузерах, таких как Chrome и Firefox). Данные доступны только во время сеанса страницы. Сделанные изменения сохраняются и доступны для текущей страницы, а также для будущих посещений сайта в том же окне. После закрытия окна хранилище удаляется.

   Минусы:

   1. Данные доступны только внутри окна/вкладки, в котором она была установлена.
   2. Подобно localStorage, tt работает с политикой того же происхождения. Таким образом, сохраненные данные будут доступны только по одному и тому же происхождению.

Это свойства объекта window в JavaScript, так же как документ является одним из свойств объекта window, который содержит объекты DOM.

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

Локальное хранилище делает то же самое, но сохраняется, даже когда браузер закрыт и снова открыт.

Вы можете установить и получить сохраненные данные следующим образом:

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

Аналогично для localStorage.

OK, LocalStorage, так как он называется локальным хранилищем для ваших браузеров, он может сохранять до 10 МБ, SessionStorage делает то же самое, но, как он говорит, он основан на сеансе и будет удален после закрытия браузера, также может сэкономить меньше, чем LocalStorage, например, до 5 МБ, но Cookies - это очень крошечные данные, хранящиеся в вашем браузере, которые могут сэкономить 4 КБ и могут быть доступны через сервер или браузер...

Я также создал изображение ниже, чтобы показать разницу с первого взгляда:

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

В локальном хранилище можно хранить автономные данные 5-10mb.

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

Хранилище сеансов: это то же самое, что и локальная дата хранения, за исключением того, что он удалит все окна, когда браузеры закрываются веб-пользователем.

В хранилище сеансов можно хранить до 5 мб данных

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

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

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

API веб-хранилища предоставляет механизмы, с помощью которых браузеры могут безопасно хранить пары ключ/значение в гораздо более интуитивно понятной форме, чем использование файлов cookie. API веб-хранилища расширяет объект Window двумя новыми свойствами - Window.sessionStorage и Window.localStorage. - при вызове одного из них будет создан экземпляр объекта Storage, через который элементы данных могут быть установлены, извлечены и удалены. Другой объект Storage используется для sessionStorage и localStorage для каждого источника (домена).

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

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

Ключи и значения всегда являются строками. Чтобы сохранить любой тип, convert it to String а затем сохраните. Всегда рекомендуется использовать методы Storage interface.

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

Два механизма в веб-хранилище:

• sessionStorage поддерживает отдельную область хранения для каждого заданного происхождения. ^{Политика одинакового происхождения} доступная для продолжительности сеанса страницы (при условии, что браузер открыт, включая перезагрузку и восстановление).
• localStorage делает то же самое, но сохраняется, даже когда браузер закрыт и снова открыт.

Хранение " Локальное хранилище записывает данные на диск, а хранилище сеансов записывает данные только в память. Любые данные, записанные в хранилище сеансов, удаляются, когда ваше приложение завершается.

Максимальное доступное хранилище отличается от браузера, но в большинстве браузеров реализовано, по крайней мере, максимальное ограничение на доступ к w3c, равное 5 МБ.

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

Всегда улавливайте безопасность и квоту LocalStorage

• QuotaExceededError: Когда ограничения хранения превышают эту функцию window.sessionStorage.setItem(key, value); , он генерирует исключение "QuotaExceededError" DOMException, если новое значение не может быть установлено. (Настройка может завершиться неудачей, если, например, у пользователя отключено хранилище для сайта или превышена квота.)

  DOMException. QUOTA_EXCEEDED_ERR - 22, пример скрипки.

• SecurityError: Uncaught SecurityError: Access to 'localStorage' is denied for this document.

  CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies.
  

StorageEvent "Событие хранения запускается на объект окна Window при изменении области хранения. Когда пользовательский агент отправляет уведомление о хранении для документа, пользовательский агент должен поставить в очередь задачу, чтобы запустить событие с именем storage в объекте Window объекта Document, используя StorageEvent.

Примечание. Пример реального мира см. В разделе " Демо-версия веб-хранилища". ^{проверить исходный код}

Прослушайте событие хранения в dom/Window, чтобы поймать изменения в хранилище. скрипка.

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

Доступ JavaScript с помощью Document.cookie

Новые файлы cookie также могут быть созданы с помощью JavaScript с использованием свойства Document.cookie, и если флаг HttpOnly не установлен, к существующим файлам cookie также можно получить доступ с JavaScript.

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

Безопасные и HttpOnly cookies ^{HTTP State Management Mechanism}

Файлы cookie часто используются в веб-приложении для идентификации пользователя и их аутентифицированного сеанса

При получении HTTP-запроса сервер может отправить заголовок Set-Cookie с ответом. Файл cookie обычно хранится в браузере, а затем cookie отправляется с запросами, сделанными на тот же сервер внутри HTTP-заголовка Cookie.

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

Файлы cookie сеанса удаляются при закрытии клиента. Они не указывают директивы Expires или Max-Age.

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

Постоянные файлы cookie истекают в определенную дату (Истекает) или через определенный период времени (Макс. Возраст).

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Заголовок HTTP файла Cookie содержит сохраненные HTTP файлы cookie, ранее отправленные сервером с заголовком Set-Cookie. Куки HTTP-only недоступны через JavaScript через свойство Document.cookie, XMLHttpRequest и API запросов для смягчения атак на межсайтовый скриптинг (XSS).

Файлы cookie в основном используются для трех целей:

• Управление сеансами "Логины, тележки, игровые счета или что-то еще, что сервер должен помнить
• Персонализация "Пользовательские настройки, темы и другие настройки
• Отслеживание (запись и анализ поведения пользователя) "Cookies имеют связанный с ними домен. Если этот домен совпадает с доменом страницы, на которой вы находитесь, куки файлы считаются файлами cookie первой стороны. Если домен отличается, он считается сторонним файлом cookie. Хотя файлы cookie сторонних производителей отправляются только на сервер, устанавливающий их, веб-страница может содержать изображения или другие компоненты, хранящиеся на серверах в других доменах (например, рекламные баннеры). Куки файлы, которые отправляются через эти сторонние компоненты, называются сторонними куками и в основном используются для рекламы и отслеживания в Интернете.

Cookies были изобретены для решения проблемы "как запомнить информацию о пользователе":

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

Пример GitHubGist

Как резюме,

• localStorage сохраняется на разных вкладках или в окнах, и даже если мы закроем браузер, соответственно, с политикой безопасности домена и выборами пользователя о пределе квоты.
• объект sessionStorage не сохраняется, если мы закрываем вкладку (контекст просмотра верхнего уровня), поскольку она не существует, если мы просматриваем другую вкладку или окно.
• Web Storage (сеанс, локальный) позволяет нам сэкономить большое количество пар ключ/значение и много текста, что невозможно сделать с помощью cookie.
• Файлы cookie, которые используются для чувствительных действий, должны иметь только короткий срок службы.
• Куки файлы в основном используются для рекламы и отслеживания в Интернете. См. Например, типы файлов cookie, используемых Google.
• Куки файлы отправляются с каждым запросом, поэтому они могут ухудшить производительность (особенно для мобильных соединений данных). Современными API-интерфейсами для клиентского хранилища являются API веб-хранилища (localStorage и sessionStorage) и IndexedDB.

Веб-хранилище HTML предоставляет два объекта для хранения данных на клиенте:

window.localStorage - stores data with no expiration date 
window.sessionStorage - stores data for one session (data is lost when 
the browser tab is closed)

LocalStorage:

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

Данные не отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т.д.) - уменьшение количества трафика между клиентом и сервером.

Данные, хранящиеся в localStorage, сохраняются до явного удаления. Сделанные изменения сохраняются и доступны для всех текущих и будущих посещений сайта. Он работает по политике одного и того же происхождения. Таким образом, сохраненные данные будут доступны только по одному и тому же происхождению.

Объект localStorage:

Объект localStorage хранит данные без истечения срока действия. Данные не будут удалены при закрытии браузера и будут доступны на следующий день, неделю или год.

// Store
 localStorage.setItem("lastname", "Smith");

// Retrieve

localStorage.getItem("lastname");

//Remove

localStorage.removeItem("lastname");

Печенье:

Мы можем установить время истечения для каждого файла cookie. Предел 4K предназначен для всего файла cookie, включая имя, значение, дату истечения срока годности и т.д. Чтобы поддерживать большинство браузеров, сохраните имя до 4000 байт и общий размер файла cookie под 4093 байтами.

Данные отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т.д.) - увеличение количества трафика между клиентом и сервером.

sessionStorage:

Он похож на localStorage. Изменения доступны только для каждого окна (или вкладки в браузерах, таких как Chrome и Firefox). Сделанные изменения сохраняются и доступны для текущей страницы, а также для будущих посещений сайта в том же окне. Когда окно закрывается, хранилище удаляется

Данные доступны только внутри окна/вкладки, в котором она была установлена.

Данные не являются постоянными, т.е. Они будут потеряны после закрытия окна/вкладки. Подобно localStorage, он работает с политикой того же происхождения. Таким образом, сохраненные данные будут доступны только по одному и тому же происхождению.

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