Какие браузерные хранилища знаешь? Расскажи их отличия.

// localStorage — навсегда
localStorage.setItem('key', 'value');
 
// sessionStorage — до закрытия вкладки
sessionStorage.setItem('key', 'value');
 
// Cookies — с автоматической отправкой
document.cookie = 'key=value';
 
// IndexedDB — полноценная БД
const db = indexedDB.open('myDB');

// Сохраняем навсегда
localStorage.setItem('theme', 'dark');
 
// Даже после перезагрузки компьютера данные остаются
console.log(localStorage.getItem('theme')); // 'dark'
 
// Объём: 5-10 МБ

// Сохраняем до закрытия вкладки
sessionStorage.setItem('formStep', '2');
 
// После закрытия вкладки всё исчезает
console.log(sessionStorage.getItem('formStep')); // '2' (пока вкладка открыта)
 
// Объём: 5-10 МБ

// Отправляются с каждым запросом на сервер!
document.cookie = 'userId=123; path=/; expires=Fri, 31 Dec 2024 23:59:59 GMT';
 
// Очень маленький объём: 4 КБ
// Много cookies = медленные запросы!

// Можно хранить много данных (до ГБ!)
// Работает асинхронно
// Сложнее в использовании
 
const request = indexedDB.open('myDatabase', 1);
// Для сложных структур данных

// ✅ Постоянные настройки
localStorage.setItem('language', 'ru');
localStorage.setItem('theme', 'dark');

// ✅ Временные данные формы
sessionStorage.setItem('draft', 'текст черновика');

// ✅ Токены авторизации (осторожно!)
document.cookie = 'token=abc123';

// ✅ Большие объёмы данных
// Офлайн-приложения, игры, редакторы

// ❌ Плохо — cookies отправляются с каждым запросом
document.cookie = 'bigData=очень_большие_данные'; // Замедляет сайт!
 
// ✅ Лучше — использовать localStorage
localStorage.setItem('bigData', 'очень_большие_данные');

// ❌ Ошибка — думают, что sessionStorage тоже навсегда
sessionStorage.setItem('important', 'data'); // Исчезнет!
 
// ✅ Правильно — использовать localStorage для важного
localStorage.setItem('important', 'data');