Это очень широкий вопрос, и многие плюсы и минусы будут зависеть от ситуации.

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

localStorage, sessionStorage и файлы cookie - все это клиентские решения для хранения данных. Данные сеанса хранятся на сервере, где они остаются под вашим прямым контролем.

localStorage и sessionStorage

localStorage и sessionStorage - это относительно новые API (что означает, что не все устаревшие браузеры будут их поддерживать) и почти идентичны (как в API, так и в возможностях) за единственным исключением постоянства. sessionStorage (как следует из названия) доступен только на время сеанса браузера (и удаляется при закрытии вкладки или окна) - однако он выдерживает перезагрузку страницы (source Руководство по хранилищу DOM - Сеть разработчиков Mozilla).

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

localStorage и sessionStorage идеально подходят для хранения неконфиденциальных данных, необходимых в клиентских скриптах между страницами (например: предпочтения, оценки в играх). Данные, хранящиеся в localStorage и sessionStorage, можно легко прочитать или изменить изнутри клиента / браузера, поэтому на них не следует полагаться для хранения конфиденциальных или связанных с безопасностью данных в приложениях.

Печенье

Это также верно для файлов cookie, они могут быть тривиально изменены пользователем, и данные также могут быть прочитаны из них в виде обычного текста, поэтому, если вы хотите хранить конфиденциальные данные, сеанс действительно является вашим единственным вариантом. Если вы не используете SSL, информация cookie также может быть перехвачена при передаче, особенно в открытом Wi-Fi.

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

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

localStorage против sessionStorage против файлов cookie

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

На стороне клиента и на стороне сервера

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

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

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

Некоторые веб-фреймворки / разработчики используют скрытые входы HTML для сохранения данных с одной страницы формы на другую, чтобы избежать истечения срока действия сеанса.

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

Дополнительную информацию о технологиях клиентского хранилища см. В разделе Dive Into Html 5.

1. LocalStorage

   Плюсы:

   1. Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. If you look at the Mozilla source code we can see that 5120KB (5MB which equals 2.5 Million chars on Chrome) is the default storage size for an entire domain. This gives you considerably more space to work with than a typical 4KB cookie.
   2. Данные не отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т. Д.), Что снижает объем трафика между клиентом и сервером.
   3. Данные, хранящиеся в localStorage, сохраняются до тех пор, пока явно не будут удалены. Внесенные изменения сохраняются и доступны для всех текущих и будущих посещений сайта.

   Минусы:

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

2. файлы cookie

   Плюсы:

   1. Compared to others, there's nothing AFAIK.

   Минусы:

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

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

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

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

3. sessionStorage

   Плюсы:

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

   Минусы:

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

Ознакомьтесь с между вкладками - как упростить взаимодействие между вкладками браузера с разными источниками.

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

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

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

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

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

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

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

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

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

вот краткий обзор и с простым и быстрым пониманием

от учителя Бо Карнеса из freecodecamp

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

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

//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 все последующие запросы страниц возвращают имя и значение cookie.

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

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

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

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

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 документа. при изменении места хранения. Когда пользовательский агент должен отправить уведомление хранилища для документа, пользовательский агент должен поставить задачу в очередь для запуска события с именем хранилище в объекте 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"

Безопасные файлы cookie и файлы cookie HttpOnly ^{Механизм управления состоянием HTTP}

Файлы 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 истекают в определенный день (Expires) или через определенный промежуток времени (Max-Age).

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

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

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

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

Файлы cookie были изобретены, чтобы решить проблему запоминания информации о пользователе:

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

GitHubGist Пример

В итоге

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

LocalStorage:

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

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

• Данные, хранящиеся в localStorage, сохраняются до тех пор, пока явно не будут удалены. Внесенные изменения сохраняются и доступны для всех текущих и будущих посещений сайта.

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

Файлы cookie:

• Мы можем установить срок действия для каждого файла cookie

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

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

sessionStorage:

• Он похож на localStorage.

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

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