Как можно хранить данные на клиенте в браузере? Какие типы хранения существуют и чем они отличаются?

Основные типы хранения данных на клиенте

В браузере существует несколько способов хранения данных на стороне клиента, каждый из которых имеет свои особенности и области применения. Основные из них: localStorage, sessionStorage, cookies и IndexedDB. Они различаются по объёму, времени жизни, доступности и способу взаимодействия с сервером.

localStorage и sessionStorage

localStorage и sessionStorage являются частью Web Storage API. Они хранят данные в виде пар ключ-значение и доступны только в рамках одного источника (протокол, домен, порт). localStorage сохраняет данные даже после закрытия браузера, а sessionStorage — только до закрытия вкладки. Объём хранилища обычно составляет около 5-10 МБ.

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

// Чтение данных
const user = localStorage.getItem('username');
console.log(user); // 'John'

// Удаление
localStorage.removeItem('username');

// sessionStorage работает аналогично
sessionStorage.setItem('token', 'abc123');

Cookies

Cookies — это небольшие текстовые файлы (до 4 КБ), которые автоматически отправляются на сервер с каждым HTTP-запросом. Они могут иметь срок действия и флаги безопасности (HttpOnly, Secure, SameSite). Cookies часто используются для аутентификации и отслеживания сессий.

// Установка cookie с помощью JavaScript
document.cookie = 'sessionId=xyz789; path=/; max-age=3600';

IndexedDB

IndexedDB — это низкоуровневая база данных для хранения больших объёмов структурированных данных (например, файлов, объектов). Она поддерживает индексы, транзакции и асинхронные операции. Объём хранилища ограничен только свободным местом на диске.

// Открытие базы данных
const request = indexedDB.open('MyDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'Alice' });
};

Вывод

Выбор типа хранения зависит от задачи: для небольших данных, которые должны сохраняться между сессиями, используйте localStorage; для временных данных — sessionStorage; для данных, которые нужно отправлять на сервер, — cookies; для больших объёмов структурированных данных — IndexedDB.