В чем разница между способами хранения данных в браузере

Локальное хранилище (localStorage) и сессионное хранилище (sessionStorage) хранят данные в формате ключ-значение, но отличаются временем жизни:

• localStorage сохраняет данные бессрочно, пока их не удалят вручную или через код.
• sessionStorage очищается при закрытии вкладки.

Оба работают только в рамках одного источника (origin) и имеют ограничение ~5-10 МБ.

Куки (Cookies):

• Хранят до 4 КБ данных.
• Отправляются на сервер с каждым запросом.
• Могут быть установлены с сроком жизни (expires или max-age).

IndexedDB:

• База данных для сложных структур.
• Подходит для больших объемов данных (десятки МБ и больше).
• Работает асинхронно.

Пример:

// localStorage
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

// Куки
document.cookie = 'username=John; max-age=3600; path=/';