Local Storage vs. Session Storage vs. Cookie

Читать в полной версии →

Начинающие разработчики часто заглядывают в справочники, чтобы найти разницу между локальным (Local Storage) и сессионным хранилищем (Session Storage) и cookie. Эта короткая статья поможет вам разобраться с вопросом.

Local Storage (локальное хранилище)

• Хранит данные бессрочно.
• Очищается только с помощью JavaScript или очистки кэша браузера.
• Хранит данные объёмом до 5 МБ, это самый большой объём из трёх вариантов хранилища.
• Не поддерживается старыми браузерами, например, IE 7 и ниже.
• Работает по правилу ограничения домена (same origin policy). То есть сохранённые данные доступны только для одного источника.

Session Storage (сессионное хранилище)

• Хранит данные, пока продолжается текущая сессия. Когда пользователь закрывает браузер, данные становятся недоступными.
• Используется контекст браузера верхнего уровня, поэтому каждая вкладка браузера хранит уникальные данные.
• Объём данных больше чем в Cookie.
• Не поддерживается старыми браузерами, например, IE 7 и ниже.

Cookie

• Хранит данные, которые можно передавать на сервер через заголовки.
• Локальное и сессионное хранилище доступны только на клиентской стороне.
• Срок хранения устанавливается при создании cookie.
• Объём данных не превышает 4 Кбайт.
• Cookie могут быть защищёнными, в этом случае их содержимое нельзя получить на стороне клиента. Это важно для аутентификации при хранении пользовательских токенов.

Адаптированный перевод статьи Local Storage vs Session Storage vs Cookie Storage by Paulund.