Один из популярных вопросов на собеседовании по веб-разработке - это разница между разными типами хранилищ. Поэтому я решил написать об этом простыми словами и в одном месте.

Печенье

Файл cookie - это особый тип хранилища в веб-браузере, который помогает поддерживать состояние пользователя. Поскольку мы знаем, что HTTP-запросы не имеют состояния, для решения этой проблемы были изобретены файлы cookie. Файлы cookie могут хранить небольшую информацию о пользователе и передаваться с каждым запросом, а ответ помогает серверу идентифицировать пользователя.
1. Файлы cookie поддерживаются почти во всех браузерах. Работает с как HTML4, так и HTML5.
2. Большинство браузеров имеют около 4 КБ памяти для файлов cookie.
3. Файлы cookie являются передается в заголовок запроса с каждым запросом и ответом на сервер.
4. Мы можем установить срок действия вместе с файлами cookie.
5. Cookie- Аутентификация на основе. Большинство современных приложений используют файлы cookie для аутентификации, чтобы поддерживать сеанс пользователя.
6. Управление сеансом: статус входа пользователя, сведения о корзине или результаты игры.
7. Персонализация: пользовательские настройки, темы и другие пользовательские настройки.
8. Отслеживание: использование и запись поведения пользователя. A / B-тестирование .

Недостатки
Если у нас есть ненужные файлы cookie, они будут отправляться вместе со всеми запросами и ответами и, следовательно, замедлять работу приложения.

LocalStorage

С изобретением HTML5 браузеры теперь могут хранить данные локально без снижения производительности. Сохраненные данные не передаются с каждым запросом на сервер.
1. Для локального хранилища нет срока действия, приложение может обновлять или удалять данные в любое время. .
2. Данные, хранящиеся в localStorage, не отправляются на сервер с каждым запросом.
3. Данные в localStorage привязаны к источнику (домен / протокол / портовый тройник). Это означает, что разные протоколы или субдомены определяют разные объекты хранилища, они не могут получать доступ к данным друг от друга.
4. Данные в localStorage совместно используются всеми вкладками и окнами из одного и того же origin.
5. Данные в localStorage остаются после перезапуска браузера и даже перезагрузки ОС.
6. Для обмена данными мы должны находиться только в том же источнике (домен / порт / протокол) путь URL может быть другим.

Недостатки
1. После того, как сохранены данные, они будут постоянными. Приложение обязано очищать данные после использования.
2. Данные, хранящиеся в localStorage, не защищены. Никогда не храните конфиденциальную информацию в localStorage.

SessionStorage

Подобно локальному хранилищу, HTML5 имеет хранилище сеанса, в котором данные истекают с завершением сеанса.
1. Данные - sessionStorage существуют только в текущей вкладке браузера.
2. Другая вкладка с той же страницей будет иметь другое хранилище.
3. Данные в sessionStorage совместно используются iframe на той же вкладке (при условии, что они происходят из одного источника).
4. Данные в sessionStorage сохраняются при обновлении страницы, но не при закрытии / открытии вкладки.
5. Как и в localStorage, данные в sessionStorage привязаны к источнику (домен / протокол / триплет порта). Это означает, что разные протоколы или субдомены определяют разные объекты хранилища, они не могут получать доступ к данным друг от друга.
6. Как и в случае с localStorage, для совместного использования данных нам нужно только быть на тот же источник (домен / порт / протокол), URL-путь может быть другим.

Недостатки
Данные, хранящиеся в sessionStorage, не защищены. Никогда не храните конфиденциальную информацию в sessionStorage.

использованная литература

1. Moz-Cookies
2. https://javascript.info/localstorage
3. Moz-LocalStorage
4. Вундеркинды для гиков-LocalStorage