Какие способы хранения данных в браузере вам известны?

• LocalStorage: Позволяет хранить данные без срока истечения. Доступно только для текущего домена (Origin). Объем до 5-10 МБ.
• SessionStorage: Похоже на LocalStorage, но данные хранятся только до закрытия вкладки или окна браузера. Объем до 5-10 МБ.
• IndexedDB: Высокопроизводительная NoSQL-база данных, встроенная в браузер. Подходит для хранения больших объемов структурированных данных. Работает асинхронно. Объем до нескольких сотен МБ или даже ГБ (зависит от браузера и свободного места).
• Cookies: Небольшие кусочки данных, отправляемые сервером и хранящиеся в браузере. Используются в основном для аутентификации и отслеживания состояния сеанса. Автоматически отправляются с каждым запросом к серверу. Объем до 4 КБ на куки, не более 20-50 куки на домен.
• Cache API: Часть Service Worker, используется для кеширования запросов и ответов, что позволяет работать офлайн и ускорять загрузку.

Сравнительная таблица:

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

// Сохранение данных
localStorage.setItem('userName', 'John Doe');

// Чтение данных
const userName = localStorage.getItem('userName');
console.log(userName); // Output: John Doe

// Удаление данных
// localStorage.removeItem('userName');
// localStorage.clear(); // Удалить все данные

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

// Сохранение данных
sessionStorage.setItem('cartId', 'abc123def456');

// Чтение данных
const cartId = sessionStorage.getItem('cartId');
console.log(cartId); // Output: abc123def456

// Удаление данных
// sessionStorage.removeItem('cartId');
// sessionStorage.clear(); // Удалить все данные

Пример установки куки через JS (для простоты, обычно устанавливаются сервером):

// Установка куки
document.cookie = "myCookie=myValue; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Чтение всех куки
console.log(document.cookie);

IndexedDB и Cache API требуют более сложного кода и обычно используются для более продвинутых сценариев, поэтому их реализация выходит за рамки краткого ответа.