В чем разница между cookie и другими хранилищами браузера?

Разница между Cookie и другими хранилищами браузера

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

Cookie

Cookie — это пары ключ-значение, которые автоматически отправляются на сервер с каждым HTTP запросом. Это главное отличие от других хранилищ.

// Установка cookie
document.cookie = "sessionId=abc123; path=/; max-age=3600; secure; samesite=strict";

// Чтение cookie
const cookies = document.cookie; // "sessionId=abc123; other=value"

Особенности:

• Отправляются автоматически на сервер (может быть отключено флагом httpOnly)
• Размер: до 4 KB на одну cookie
• Область видимости: по domain и path
• Может быть защищена флагами: httpOnly, secure, sameSite
• Время жизни: можно установить или использовать session cookie

localStorage

localStorage — это синхронное хранилище с доступом только со стороны клиента. Данные сохраняются без срока истечения.

// Запись
localStorage.setItem("user", JSON.stringify({ id: 1, name: "John" }));

// Чтение
const user = JSON.parse(localStorage.getItem("user"));

// Удаление
localStorage.removeItem("user");
localStorage.clear(); // очистить всё

Особенности:

• Размер: до 5-10 MB в зависимости от браузера
• Синхронный API (может блокировать UI при большом объёме)
• Никогда не отправляется на сервер
• Доступен только с клиента (уязвим для XSS)
• Одна origin = одно localStorage
• Сохраняется даже после закрытия браузера

sessionStorage

sessionStorage — аналог localStorage, но данные удаляются при закрытии браузера.

sessionStorage.setItem("tempData", "value");
const data = sessionStorage.getItem("tempData");
sessionStorage.removeItem("tempData");

Особенности:

• Размер: до 5-10 MB
• Синхронный API
• Удаляется при закрытии tab или окна
• Отдельное хранилище для каждой tab
• Никогда не отправляется на сервер

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: "John", email: "john@example.com" });
  
  // Получить запись
  const getRequest = store.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };
};

Особенности:

• Размер: несколько сотен MB (зависит от браузера)
• Асинхронный API (не блокирует UI)
• Поддержка индексов и запросов
• Работает с большими объёмами данных
• Никогда не отправляется на сервер

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

Практические примеры использования

Cookie для аутентификации:

// На сервере после логина
res.setHeader("Set-Cookie", "authToken=xyz; httpOnly; secure; sameSite=strict");
// httpOnly предотвращает доступ из js

localStorage для тёмной темы:

function toggleTheme() {
  const isDark = document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme", isDark ? "dark" : "light");
}

// При загрузке
const theme = localStorage.getItem("theme") || "light";
document.documentElement.classList.toggle("dark", theme === "dark");

IndexedDB для offline-first приложения:

// Сохранить данные offline
await saveToIndexedDB("posts", postData);
// Синхронизировать с сервером когда online
if (navigator.onLine) {
  await syncWithServer();
}

Рекомендации

• Используй cookie для аутентификации и авторизации (с флагом httpOnly)
• Используй localStorage для небольших пользовательских настроек
• Используй sessionStorage для временных данных сессии
• Используй IndexedDB для offline-first приложений и больших данных
• Помни о XSS уязвимостях при использовании localStorage
• Всегда валидируй данные с сервера, не доверяй данным из хранилищ