В чем разница между localStorage, sessionStorage, сеансом и куки?

Каковы технические плюсы и минусы localStorage, sessionStorage, сеанса и файлов cookie, и когда я буду использовать один над другим?

ОТВЕТЫ

Ответ 1

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

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

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

localStorage и sessionStorage

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

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

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

Печенье

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

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

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

localStorage vs. sessionStorage vs. Cookies

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

Клиентская сторона или серверная сторона

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

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

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

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

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

Для дальнейшего ознакомления с технологиями хранения клиентов см. Dive Into Html 5.

Ответ 2

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

Ответ 3

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

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

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

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

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

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

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

Ответ 4

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

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

LocalStorage, SessionStorage and Cookie

Ответ 5

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.

Ответ 6

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

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

Ответ 7

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

Ответ 8

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