localStorage vs sessionStorage vs Cookies — подробное сравнение

Файлы cookie были с нами в течение долгого времени (Internet Explorer v2 поддерживал их в октябре 1995 года). В них нет ничего плохого, и они, безусловно, сделали Интернет более приятным местом, но спустя почти 25 лет многое изменилось.

Локальное хранилище (вы найдете его в разделе «Веб-хранилище» на W3) не является заменой файлов cookie. Вот что больше всего сбивает с толку. В большинстве случаев вы можете безопасно использовать localStorage вместо файлов cookie и получить (неправильное) впечатление, что они одинаковы, хотя это не так. Читайте дальше, чтобы увидеть серьезный анализ того, как и когда использовать localStorage для замены файлов cookie.

Революция или эволюция?

Локальное хранилище, или localStorage, или хранилище DOM, или веб-хранилище (я не придумываю эти имена; все они используются и все ссылаются на одно и то же) получили реальное признание среди популярных браузеров в 2012 году как «HTML5». характерная черта". Это казалось удачной заменой печенья. Исправление для раздутых запросов, содержащих ненужные данные, с ограничениями по времени и размеру. Хотя он «решает» эти проблемы, он не является заменой файлов cookie «яблоки за яблоки».

А пока мы на тему ненужных данных. Знаете ли вы, что запросы — это не единственное, что может иметь лишнее раздувание, ваш сайт тоже может. К счастью, есть решение, и оно называется WP Reset.

WP Reset — это плагин, который поставляется с рядом параметров сброса, которые позволят вам делать такие вещи, как удаление накопленных данных и / или надстроек (плагинов, тем, пользователей, виджетов, контента и т. д.) с вашего сайта, и даже вытирая весь ваш сайт. Удивительно, правда? Но это не все. Помимо других функций, этот плагин может создавать моментальные снимки базы данных, а также коллекции плагинов и тем, которые вы можете установить одним щелчком мыши столько раз, сколько вам нужно. Определенно инструмент стоит проверить.

Но теперь вернемся к разговору о localStorage.

Как следует из названия, данные хранятся локально на устройстве пользователя. Следовательно, его не нужно передавать по сети с каждым HTTP-запросом, что уменьшает занимаемую площадь и дает нам гораздо больше места для сохранения данных. Эта парадигма «только локально» является наиболее существенным различием между файлами cookie и локальным хранилищем. Файлы cookie могут быть прочитаны как на стороне сервера, так и на стороне клиента, локальное хранилище — только на стороне клиента. Вот и все. Если ваше приложение сильно зависит от чтения файлов cookie на стороне сервера и создания контента на его основе, то переход на локальное хранилище будет означать переписывание приложения. Если вы используете файлы cookie только для хранения настроек, таких как активная вкладка в интерфейсе, то локальное хранилище является идеальной заменой.

Обманчиво похоже

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

Копаем глубже в веб-хранилище и файлы cookie

Максимальный объем данных , которые вы можете хранить локально, зависит от браузера. Нет никаких гарантий, и если вы хотите сделать безопасную ставку, уменьшите 5 МБ до примерно 2 МБ. Используйте этот удобный инструмент, чтобы проверить максимально допустимый размер локального хранилища в вашем браузере.

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

Срок действия всех файлов cookie истекает в какой-то момент, но люди, как правило, устанавливают срок действия на несколько лет, что кажется вечным в Интернете. С другой стороны, локальное хранилище никогда не истекает и доступно до тех пор, пока приложение или пользователь не удалит его. Хранилище сеансов очищается при закрытии вкладки или окна — без исключений.

«Что вы имеете в виду, что только строки могут быть сохранены ? Я все время сохраняю объекты!» JSON позволяет сохранять объекты и другие типы данных в виде строки. Преобразование производится на чтение и запись без вашего ведома. С звуковой библиотекой для работы с файлами cookie и локальным хранилищем вам не придется думать о типах данных. Однако это не меняет того факта, что изначально поддерживаются только строки.

Не существует ни одной клиентской функции, которую поддерживают все браузеры . Печальный факт, но все же факт. Вы можете проверить конкретные цифры в разделе «Могу ли я использовать», но что касается файлов cookie и локального хранилища, я бы проигнорировал все браузеры, которые их не поддерживают. Они маргинальны и ниже 1%.

Вы не можете получить доступ к localStorage только через обработку на стороне сервера. Вам тоже нужен JS. Когда пользователь запрашивает страницу и запускается PHP (или любой другой серверный язык, который вы используете) для ее создания, у вас не будет доступа к каким-либо локальным данным, сеансовым или постоянным. После загрузки страницы и запуска JS вы можете получить доступ к локальным данным и делать все, что вам нужно — настроить пользовательский интерфейс или использовать AJAX для отправки локальных данных обратно на сервер. Так что да, вы можете вернуть локальные данные на сервер, но не таким же образом и в тот же момент, как с файлом cookie. В зависимости от ваших требований это может стать препятствием при переключении с файлов cookie на локальное хранилище, поэтому, пожалуйста, планируйте заранее!

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

Пользователи «не должны» получать доступ к локальным данным и изменять их напрямую (вне вашего приложения), но ничто не мешает им это делать. Существует множество инструментов отладки, доступных для редактирования локально сохраненных данных. Поэтому не доверяйте локальным данным и не предполагайте, что пользователь их не трогал. Всегда предполагайте худшее.

Хотя файлы cookie имеют атрибут «безопасный» , который вы можете установить, он не защищает файл cookie при передаче из приложения в браузер. Так что это лучше, чем ничего, но далеко не безопасно. Локальное хранилище, будучи технологией только на стороне клиента, не знает и не заботится о том, используете ли вы HTTP или HTTPS. Безопасность должна исходить из того, как вы обрабатываете данные. Не храните никакие конфиденциальные данные, такие как номера кредитных карт или пароли, в каком-либо локальном хранилище! Всегда!

Немного кода для начала

Эта статья не предназначена для руководства по веб-хранилищу JavaScript, но чтобы избавить вас от проблем, вот пример Hello World с локальным хранилищем;

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

Приведенный выше код работает и максимально прост. Однако я не рекомендую его использовать. Как и в случае с файлами cookie, никто не использует document.cookies для взаимодействия с ними. Есть небольшие межбраузерные различия, которые следует учитывать, и, поскольку они хранят только строки, вам необходимо выполнять преобразование в строки и анализировать с помощью JSON при каждом чтении и записи. Вот почему мы используем небольшие библиотеки, которые помогают нам обрабатывать файлы cookie, такие как js-cookie. То же самое касается локального хранилища. Помещение небольшого уровня абстракции между вашим кодом и API поможет в долгосрочной перспективе. Я рекомендую store.js. Он существует уже некоторое время, заботится о кросс-браузерной ерунде и откатах и ​​даже имеет удобные плагины, которые расширяют его возможности. Если вы заинтересованы в некоторой практике кодирования, создайте свою собственную библиотеку и преобразуйте ее в плагин jQuery.

Печеньки плохие, верно? Нам нужно что-то новое!

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

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

Если у вас есть (много) данных для хранения на стороне клиента, которые редко передаются на сервер и эти данные не содержат ничего конфиденциального — начните использовать локальное хранилище ! Это именно то, для чего он был создан. Вы создадите более быстрое приложение, сделав все HTTP-запросы в домене более легкими, и получите теплое нечеткое ощущение использования чего-то нового.