Больше данных хранится в cookie или в localStorage

Больше данных хранится в cookie или в localStorage

В localStorage хранится значительно больше данных, чем в cookie. Это основное различие между этими двумя механизмами хранения данных на клиенте.

Сравнение размеров

Cookie

• Размер одной cookie: обычно 4 KB (4096 байт)
• Общий лимит cookie на домен: примерно 180 KB (50-100 cookies)
• Различия по браузерам: Chrome, Firefox поддерживают разные лимиты

// Установка cookie (максимум 4 KB)
document.cookie = "userToken=abc123xyz; max-age=3600; path=/";

// Если превышить лимит — cookie не сохранится
const largeData = "x".repeat(5000);
document.cookie = `data=${largeData}"; // Не будет сохранена

localStorage

• Размер: обычно 5-10 MB на домен
• В Chrome: 10 MB
• В Firefox: 10 MB
• В Safari: 5 MB
• В IE: 10 MB

// localStorage может хранить до 10 MB
localStorage.setItem("largeData", "x".repeat(1000000)); // 1 MB

// Проверка доступного размера
try {
  localStorage.setItem("test", "x".repeat(1000));
  console.log("Available space");
} catch (e) {
  if (e.name === "QuotaExceededError") {
    console.log("Storage limit exceeded");
  }
}

Таблица сравнения

Параметр          | Cookie        | localStorage
------------------|---------------|---------------
Максимум на домен | 4-180 KB      | 5-10 MB
Одна единица      | 4 KB          | N/A (весь лимит)
Отправляется с    | Каждый запрос | Нет (только JS)
Типография        | Текст         | Текст (JSON)
Сроком            | Настраиваемый | Не выберет
Доступ с сервера  | Да            | Только клиент
XSS защита        | Нет (уязвима) | Нет (уязвима)

Почему cookie меньше

1. Историческая причина

Cookie были изобретены в конце 1990-х, когда интернет был медленнее. Маленький размер был ограничением браузеров того времени.

2. Cookie отправляются с каждым запросом

// Когда браузер отправляет запрос на сервер
fetch("/api/users")
  // Автоматически добавляется: Cookie: sessionId=xyz; userToken=abc

Большие cookie замедляют все HTTP запросы. Поэтому браузеры ограничили размер.

3. localStorage только на клиенте

// localStorage НЕ отправляется на сервер
localStorage.setItem("userPreferences", JSON.stringify({...})); // OK 10 MB

// Для отправки данных нужно явно вызвать fetch
const data = localStorage.getItem("userPreferences");
await fetch("/api/preferences", {
  method: "POST",
  body: data
});

Практические примеры

Cookie: Маленькие данные

// Хороший пример: аутентификация токена
document.cookie = "sessionToken=xyz123abc; max-age=86400; path=/; Secure; SameSite=Strict";

// Хороший пример: простые настройки
document.cookie = "theme=dark; max-age=2592000; path=/";

// Плохой пример: большой объект
const user = {id: 1, name: "Алиса", ...};
document.cookie = `user=${JSON.stringify(user)}`; // Будет обрезано

localStorage: Больше данных

// Хороший пример: кэш API данных
const users = [
  {id: 1, name: "Алиса", email: "alice@example.com"},
  {id: 2, name: "Боб", email: "bob@example.com"},
  // ... может быть много юзеров
];
localStorage.setItem("cachedUsers", JSON.stringify(users)); // OK

// Хороший пример: черновики форм
const draftBlogPost = {
  title: "Название статьи",
  content: "Длинный текст статьи...", // Может быть очень длинным
  tags: ["javascript", "web"],
  images: ["...base64-encoded images..."]
};
localStorage.setItem("draftPost", JSON.stringify(draftBlogPost)); // OK

// Хороший пример: локальное приложение (offline-first)
const appState = {
  tasks: [...],
  notes: [...],
  documents: [...]
};
localStorage.setItem("appState", JSON.stringify(appState)); // OK

Как узнать доступный размер

function getStorageInfo() {
  // Для localStorage
  const testData = "test";
  const testKey = "__storageTest";
  
  try {
    localStorage.setItem(testKey, testData);
    localStorage.removeItem(testKey);
    console.log("localStorage доступен");
  } catch (e) {
    console.log("localStorage недоступен");
  }
  
  // Для cookie
  const testCookie = "test=123";
  document.cookie = testCookie;
  if (document.cookie.includes("test")) {
    console.log("Cookies доступны");
  }
}

// Проверка QuotaExceededError
function checkStorageSpace() {
  let size = 0;
  try {
    for (let i = 0; i < 1000000; i++) {
      const test = "x".repeat(1024);
      localStorage.setItem(`test_${i}`, test);
      size += 1024;
    }
  } catch (e) {
    if (e.name === "QuotaExceededError") {
      console.log(`Storage limit at: ${size} bytes`);
      // Очищаем тестовые данные
      const keys = Object.keys(localStorage);
      keys.forEach(k => {
        if (k.startsWith("test_")) localStorage.removeItem(k);
      });
    }
  }
}

Когда использовать что

Используй Cookie для:

• Аутентификационные токены (HTTP-only для безопасности)
• Идентификация сессии
• Отслеживание пользователей (analytics)
• Маленькие персональные настройки

Используй localStorage для:

• Кэширование API ответов
• Черновики форм (offline support)
• Пользовательские настройки (темы, язык)
• Состояние приложения
• Большие объемы данных

Безопасность

// Cookie
// Уязвимость: XSS может украсть данные
// Защита: используй HttpOnly флаг (работает только на сервере)
response.setCookie("token", value, {
  httpOnly: true, // Недоступна для JavaScript
  secure: true,   // Только HTTPS
  sameSite: "Strict"
});

// localStorage
// Уязвимость: любой JavaScript может прочитать
const token = localStorage.getItem("token");
// XSS атака: alert(localStorage.getItem("token"));
// Защита: регулярно очищай неиспользуемые данные

Вывод

localStorage может хранить в 25-2500 раз больше данных, чем cookie. Выбор между ними зависит от типа данных:

• Cookie — для маленьких данных, которые нужно отправлять на сервер
• localStorage — для больших данных, которые нужны только на клиенте