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

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

Cookie, localStorage и sessionStorage — это механизмы хранения данных в браузере. Cookie используются для передачи данных между клиентом и сервером, имеют срок жизни и могут быть доступны на сервере. localStorage хранит данные без срока действия, доступные только на клиенте. sessionStorage хранит данные в течение сессии браузера и также доступен только на клиенте.

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

Cookie, localStorage и sessionStorage — это три различных способа хранения данных в браузере, каждый из которых имеет свои особенности и области применения.

Cookie

Cookie — это небольшие фрагменты данных, которые браузер сохраняет и отправляет на сервер с каждым HTTP-запросом. Они часто используются для аутентификации пользователей, сохранения пользовательских предпочтений и отслеживания сессий.

• Срок действия: Cookie могут иметь срок действия, который задается параметром Expires или Max-Age. Если срок действия не указан, cookie удаляются после закрытия браузера.
• Доступность: Cookie доступны как на клиенте, так и на сервере. Это делает их полезными для передачи информации между клиентом и сервером.
• Размер: Обычно ограничены 4KB на один cookie.
• Безопасность: Cookie могут быть защищены с помощью флагов HttpOnly (недоступны через JavaScript) и Secure (передаются только по HTTPS).

localStorage

localStorage — это объект, который позволяет хранить данные в браузере без срока действия. Данные сохраняются даже после закрытия и повторного открытия браузера.

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

Пример использования localStorage:

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

• setItem: Сохраняет данные в localStorage. Ключ и значение должны быть строками.
• getItem: Извлекает данные по ключу.
• removeItem: Удаляет данные по ключу.
• clear: Удаляет все данные из localStorage.

sessionStorage

sessionStorage — это объект, который позволяет хранить данные в течение одной сессии браузера. Данные удаляются после закрытия вкладки или окна браузера.

• Срок действия: Данные сохраняются только в течение сессии. Закрытие вкладки или окна удаляет данные.
• Доступность: Доступны только на клиенте, данные не отправляются на сервер.
• Размер: Обычно ограничены 5MB на домен.
• Применение: Подходит для временного хранения данных, которые не должны сохраняться между сессиями, например, данные формы.

Пример использования sessionStorage:

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

• setItem: Сохраняет данные в sessionStorage. Ключ и значение должны быть строками.
• getItem: Извлекает данные по ключу.
• removeItem: Удаляет данные по ключу.
• clear: Удаляет все данные из sessionStorage.

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