В чем разница между localStorage, sessionStorage и cookies?

1️⃣ Как кратко ответить

• localStorage и sessionStorage — это объекты веб-хранилища, которые позволяют хранить данные в браузере. localStorage сохраняет данные без срока действия, пока их не удалит пользователь или скрипт. sessionStorage сохраняет данные только на время сессии, т.е. пока открыта вкладка браузера. Cookies — это небольшие фрагменты данных, которые могут храниться как на стороне клиента, так и на стороне сервера, и имеют срок действия, который можно задать. Cookies также отправляются на сервер с каждым HTTP-запросом, в отличие от localStorage и sessionStorage.

2️⃣ Подробное объяснение темы

localStorage, sessionStorage и cookies — это три способа хранения данных на стороне клиента в веб-приложениях. Они имеют разные характеристики и применяются в зависимости от требований к хранению данных.

localStorage

• Назначение: Хранение данных без срока действия.
• Объем: Обычно до 5-10 МБ в зависимости от браузера.
• Доступность: Данные доступны на всех вкладках и окнах для одного и того же домена.
• Срок действия: Данные сохраняются до тех пор, пока не будут удалены вручную пользователем или программно.
• Пример использования: Хранение пользовательских настроек, которые должны сохраняться между сессиями.

// Сохранение данных в localStorage
localStorage.setItem('username', 'JohnDoe');
​
// Получение данных из localStorage
const username = localStorage.getItem('username');
​
// Удаление данных из localStorage
localStorage.removeItem('username');
​
// Очистка всего localStorage
localStorage.clear();

sessionStorage

• Назначение: Хранение данных на время сессии.
• Объем: Обычно до 5-10 МБ в зависимости от браузера.
• Доступность: Данные доступны только в текущей вкладке или окне.
• Срок действия: Данные удаляются при закрытии вкладки или окна.
• Пример использования: Хранение временных данных, таких как состояние формы, которые не должны сохраняться между сессиями.

// Сохранение данных в sessionStorage
sessionStorage.setItem('sessionData', 'temporaryValue');
​
// Получение данных из sessionStorage
const sessionData = sessionStorage.getItem('sessionData');
​
// Удаление данных из sessionStorage
sessionStorage.removeItem('sessionData');
​
// Очистка всего sessionStorage
sessionStorage.clear();

Cookies

• Назначение: Хранение небольших фрагментов данных, которые могут быть отправлены на сервер.
• Объем: Обычно до 4 КБ.
• Доступность: Данные доступны на всех вкладках и окнах для одного и того же домена.
• Срок действия: Задается при создании cookie, может быть постоянным или временным.
• Пример использования: Хранение данных аутентификации, предпочтений пользователя, которые должны быть доступны на сервере.

// Установка cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
​
// Получение всех cookies
const cookies = document.cookie;
​
// Удаление cookie (установка прошедшей даты)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Сравнение

• localStorage и sessionStorage не отправляются на сервер с HTTP-запросами, в отличие от cookies.
• localStorage сохраняет данные между сессиями, тогда как sessionStorage — только в рамках одной сессии.
• Cookies имеют меньший объем и могут быть использованы для передачи данных между клиентом и сервером.

Каждый из этих методов имеет свои преимущества и ограничения, и выбор между ними зависит от конкретных требований приложения.