Каковы технические плюсы и минусы localStorage, sessionStorage, session и cookies, и когда я буду использовать один поверх другого?
533
Каковы технические плюсы и минусы localStorage, sessionStorage, session и cookies, и когда я буду использовать один поверх другого?
Ответы:
Это чрезвычайно широкий вопрос, и многие плюсы и минусы будут зависеть от ситуации.
Во всех случаях эти механизмы хранения будут характерны для отдельного браузера на отдельном компьютере / устройстве. Любое требование к хранению данных на постоянной основе между сеансами должно включать вашу сторону сервера приложений - скорее всего, с использованием базы данных, но, возможно, XML или текстового / 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.
С положительной стороны, куки могут иметь степень защиты от угроз безопасности, таких как межсайтовый скриптинг (XSS) / внедрение скриптов, устанавливая флаг только HTTP, что означает, что современные (поддерживающие) браузеры будут препятствовать доступу к куки и значениям из JavaScript ( это также предотвратит ваш собственный, законный JavaScript доступ к ним). Это особенно важно для куки-файлов аутентификации, которые используются для хранения токена, содержащего информацию о пользователе, который вошел в систему - если у вас есть копия этого куки-файла, то для всех намерений и целей вы становитесь этим пользователем в той мере, в которой это веб-приложение. и имеют тот же доступ к данным и функциональности, которые есть у пользователя.
Поскольку файлы cookie используются для целей аутентификации и сохранения пользовательских данных, все файлы cookie, действительные для страницы, отправляются из браузера на сервер для каждого запроса в один и тот же домен - это включает исходный запрос страницы, любые последующие запросы Ajax, все изображения, таблицы стилей, скрипты и шрифты. По этой причине файлы cookie не должны использоваться для хранения больших объемов информации. Браузер также может накладывать ограничения на размер информации, которая может храниться в файлах cookie. Обычно куки используются для хранения идентификационных токенов для аутентификации, сеанса и отслеживания рекламы. Токены, как правило, представляют собой не читаемую человеком информацию, а зашифрованные идентификаторы, связанные с вашим приложением или базой данных.
localStorage vs. sessionStorage vs. Cookies
С точки зрения возможностей, cookie, sessionStorage и localStorage позволяют только хранить строки - можно неявно преобразовывать примитивные значения при настройке (их необходимо преобразовать обратно, чтобы использовать их в качестве их типа после чтения), но не Objects или Arrays (возможно их сериализация в JSON, чтобы хранить их с помощью API). Хранилище сессий, как правило, позволяет хранить любые примитивы или объекты, поддерживаемые языком / структурой на стороне сервера.
Сторона клиента против стороны сервера
Поскольку HTTP является протоколом без сохранения состояния - веб-приложения не имеют возможности идентифицировать пользователя по предыдущим посещениям при возвращении на веб-сайт - данные сеанса обычно используют маркер cookie для идентификации пользователя для повторных посещений (хотя редко используются параметры URL для та же цель). У данных обычно есть скользящее время истечения (обновляется каждый раз, когда пользователь посещает), и в зависимости от вашего сервера / инфраструктуры данные будут либо храниться в процессе (то есть данные будут потеряны в случае сбоя или перезапуска веб-сервера), либо внешне в государственный сервер или база данных. Это также необходимо при использовании веб-фермы (более одного сервера для данного сайта).
Поскольку данные сеанса полностью контролируются вашим приложением (на стороне сервера), это лучшее место для чего-либо чувствительного или безопасного по своей природе.
Очевидным недостатком данных на стороне сервера является масштабируемость - ресурсы сервера требуются для каждого пользователя на время сеанса, и что любые данные, необходимые на стороне клиента, должны отправляться с каждым запросом. Поскольку у сервера нет возможности узнать, переходит ли пользователь на другой сайт или закрывает ли он свой браузер, данные сеанса должны истечь через определенное время, чтобы все ресурсы сервера не были заняты оставленными сеансами. Поэтому при использовании данных сеанса следует помнить о возможности истечения срока действия данных и их потери, особенно на страницах с длинными формами. Это также будет потеряно, если пользователь удалит свои куки или переключит браузеры / устройства.
Некоторые веб-фреймворки / разработчики используют скрытые вводы HTML для сохранения данных с одной страницы формы на другую, чтобы избежать истечения срока сеанса.
localStorage, sessionStorage и cookie-файлы подчиняются правилам «одного и того же происхождения», что означает, что браузеры должны запрещать доступ к данным, кроме домена, с которого информация начинается.
Для дальнейшего чтения о клиентских технологиях хранения см. Dive Into Html 5 .
источник
sessionStorage
ли удалено, когда окно закрыто или вкладка?LocalStorage
Плюсы :
Минусы :
Печенье
Плюсы:
Минусы:
Данные отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т. Д.), Что увеличивает объем трафика между клиентом и сервером.
Обычно допускается следующее:
sessionStorage
Плюсы:
localStorage
.Минусы:
localStorage
, он работает по той же политике происхождения . Таким образом, сохраненные данные будут доступны только для одного источника.Оформить заказ через вкладки - как упростить взаимодействие между вкладками браузера из разных источников.
источник
Хорошо, LocalStorage, так как он называется локальным хранилищем для ваших браузеров, он может сэкономить до 10 МБ , SessionStorage делает то же самое, но, как следует из названия, он основан на сеансах и будет удален после закрытия браузера, также может сэкономить меньше, чем LocalStorage, например, до 5 МБ , но файлы cookie - это крошечные данные, хранящиеся в вашем браузере, которые могут сэкономить до 4 КБ и могут быть доступны через сервер или браузер одновременно ...
Я также создал изображение ниже, чтобы сразу увидеть различия:
источник
Это свойства объекта 'window' в JavaScript, точно так же, как document является одним из свойств объекта window, который содержит объекты DOM.
Свойство Session Storage поддерживает отдельную область хранения для каждого данного источника, доступную на время сеанса страницы, т.е. до тех пор, пока открыт браузер, включая перезагрузку и восстановление страницы.
Локальное хранилище делает то же самое, но сохраняется даже при закрытии и повторном открытии браузера.
Вы можете установить и извлечь сохраненные данные следующим образом:
Аналогично для локального хранилища.
источник
sessionStorage
даже для новой вкладки открывается новое окно. Таким образом, все, что хранится для определенного домена в одной вкладке, не будет доступно тому же домену в следующей вкладке.Локальное хранилище: хранит данные пользовательской информации без даты истечения срока действия. Эти данные не будут удалены, когда пользователь закрыл окна браузера, они будут доступны на день, неделю, месяц и год.
В локальном хранилище можно хранить 5-10 МБ автономных данных.
Хранение сеанса: Это то же самое, что и дата локального хранения, за исключением того, что все окна будут удалены, когда окна браузера закрыты веб-пользователем.
В хранилище сессии можно хранить до 5 Мб данных
Сеанс : сеанс - это глобальная переменная, хранящаяся на сервере. Каждому сеансу присваивается уникальный идентификатор, который используется для извлечения сохраненных значений.
Cookies : Cookies - это данные, хранящиеся в небольших текстовых файлах в виде пар имя-значение на вашем компьютере. После того, как cookie был установлен, все последующие запросы страницы возвращают имя и значение cookie.
источник
API веб-хранилища предоставляет механизмы, с помощью которых браузеры могут безопасно хранить пары ключ / значение гораздо более интуитивно, чем при использовании файлов cookie. API Web Storage расширяет
Window
объект с двумя новыми свойствами -Window.sessionStorage
иWindow.localStorage
. - вызов одного из них создаст экземпляр объекта Storage, с помощью которого можно устанавливать, извлекать и удалять элементы данных. Другой объект хранения используется дляsessionStorage
иlocalStorage
для каждого источника (домена).Объекты хранения - это простые хранилища значений ключей , похожие на объекты, но они остаются нетронутыми при загрузке страниц .
Ключи и значения всегда являются строками . Для хранения любого типа,
convert it to String
а затем сохранить его. Всегда рекомендуется использоватьStorage interface
методы.Два механизма в веб-хранилище следующие:
Хранения максимально доступные отличаются от браузера , но большинство браузеров реализовали по крайней мере w3c рекомендуемые максимальный предел хранения 5МБ .
Всегда отлавливать ошибки безопасности LocalStorage и превышения квоты
QuotaExceededError : Когда для этой функции превышаются пределы хранения
window.sessionStorage.setItem(key, value);
, она генерирует исключение DOMException «QuotaExceededError», если не удалось установить новое значение. (Настройка может быть неудачной, если, например, пользователь отключил хранилище для сайта или если квота была превышена.)DOMException. QUOTA_EXCEEDED_ERR - 22 , пример скрипки .
SecurityError :
Uncaught SecurityError: Access to 'localStorage' is denied for this document
.StorageEvent «Событие хранилища вызывается для объекта Window документа при изменении области хранилища. Когда пользовательский агент должен отправить уведомление хранилища для документа, пользовательский агент должен поставить задачу в очередь, чтобы запустить событие с именем storage в объекте Window объекта Document, используя StorageEvent.
Прослушайте событие хранилища в dom / Window, чтобы отследить изменения в хранилище. скрипка .
Файлы cookie (веб- файлы cookie, файлы cookie браузера) Файлы cookie - это данные, хранящиеся в небольших текстовых файлах в виде пар имя-значение на вашем компьютере.
Новые cookie-файлы также можно создавать с помощью JavaScript с использованием свойства Document.cookie, и если флаг HttpOnly не установлен, к существующим cookie-файлам также можно получить доступ из JavaScript.
Файлы cookie часто используются в веб-приложении для идентификации пользователя и его аутентифицированного сеанса.
При получении HTTP-запроса сервер может отправить заголовок Set-Cookie с ответом. Файл cookie обычно сохраняется браузером, а затем файл cookie отправляется с запросами, направленными на тот же сервер внутри HTTP-заголовка Cookie.
Сессионные куки будут удалены, когда клиент будет закрыт. Они не указывают директивы Expires или Max-Age.
Срок действия постоянных файлов cookie истекает в определенную дату (срок действия истекает) или по истечении определенного периода времени (максимальный возраст).
Заголовок HTTP-запроса Cookie содержит сохраненные HTTP-файлы cookie, ранее отправленные сервером с заголовком Set-Cookie. Куки только для HTTP не доступны через JavaScript через свойство Document.cookie, API-интерфейсы XMLHttpRequest и Request для предотвращения атак на межсайтовый скриптинг (XSS).
Печенье в основном используются для трех целей:
Файлы cookie были изобретены для решения проблемы «как запомнить информацию о пользователе»:
Пример GitHubGist
Как резюме,
источник
LocalStorage :
Веб-хранилище можно рассматривать упрощенно как улучшение файлов cookie, обеспечивая гораздо большую емкость хранилища. Доступный размер составляет 5 МБ, что значительно больше места для работы, чем типичный файл cookie размером 4 КБ.
Данные не отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т. Д.), Что снижает объем трафика между клиентом и сервером.
Данные, хранящиеся в localStorage, сохраняются до явного удаления. Внесенные изменения сохраняются и доступны для всех текущих и будущих посещений сайта.
Он работает по политике того же происхождения. Таким образом, сохраненные данные будут доступны только для одного источника.
Печенье:
Мы можем установить срок действия каждого куки
Ограничение 4 КБ относится ко всему файлу cookie, включая имя, значение, дату истечения срока действия и т. Д. Для поддержки большинства браузеров сохраняйте имя менее 4000 байт, а общий размер куки - менее 4093 байт.
Данные отправляются обратно на сервер для каждого HTTP-запроса (HTML, изображения, JavaScript, CSS и т. Д.), Что увеличивает объем трафика между клиентом и сервером.
sessionStorage:
Изменения доступны только для каждого окна (или вкладки в браузерах, таких как Chrome и Firefox). Внесенные изменения сохраняются и доступны для текущей страницы, а также для будущих посещений сайта в том же окне. После закрытия окна хранилище удаляется. Данные доступны только в том окне / вкладке, в котором они были установлены.
Данные не являются постоянными, то есть они будут потеряны после закрытия окна / вкладки. Как и localStorage, он работает по той же политике происхождения. Таким образом, сохраненные данные будут доступны только для одного источника.
источник
вот краткий обзор и с простым и быстрым пониманием
от учителя Бо Карнса из freecodecamp
источник