1. хранилище localStorage

   плюсы:

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

   минусы:

   1. Он работает в same-origin политика. Таким образом, сохраненные данные будут доступны только в том же источнике.

2. печенье

   плюсы:

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

   плюсы:

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

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

      обычно допускается следующее:

      • 300 cookies в общей сумме
      • 4096 байт за печенье
      • 20 cookies на домен
      • 81920 байт в домен (задано 20 cookies максимального размера 4096 = 81920 байт.)

3. sessionStorage

   плюсы:

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

   плюсы:

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

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

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

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

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

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

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

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

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

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

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

объекты хранения просты

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

в локальном хранилище можно хранить автономные данные 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";

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

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

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

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:

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

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

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

объект localStorage:

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

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

// Retrieve

localStorage.getItem("lastname");

//Remove

localStorage.removeItem("lastname");

Cookies:

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

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

sessionStorage:

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

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

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

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