В чем разница между способами хранения данных в браузере?

Способы хранения данных в браузере

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

1. Cookies

Cookies — это текстовые данные, которые автоматически отправляются с каждым HTTP запросом к серверу. Это самый старый и универсальный способ хранения.

// Установка cookie
document.cookie = "userId=12345; path=/; max-age=86400; secure; samesite=strict";

// Чтение (все cookie как строка)
const allCookies = document.cookie;

// Удаление (установить прошедшую дату)
document.cookie = "userId=; max-age=0";

Характеристики:

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

2. localStorage

localStorage — синхронное хранилище для больших объемов данных, сохраняется без срока истечения.

// Запись объекта
const user = { id: 1, name: "Alice", roles: ["admin", "user"] };
localStorage.setItem("user", JSON.stringify(user));

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

// Итерация по ключам
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
}

// Проверка наличия
if (localStorage.getItem("theme")) {
  console.log("Theme saved");
}

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

Характеристики:

• Размер: 5-10 MB в зависимости от браузера
• API: Синхронный (может блокировать UI)
• Отправка на сервер: Нет
• Безопасность: Доступна для XSS атак
• Время жизни: Постоянное (до явного удаления)
• Доступ: Только JavaScript
• Область: Одна origin (protocol + domain + port)

3. sessionStorage

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

// Запись
sessionStorage.setItem("tempData", JSON.stringify({ step: 1 }));

// Чтение
const data = JSON.parse(sessionStorage.getItem("tempData"));

// Проверка
if (sessionStorage.getItem("authStep") === "2FA") {
  // Показать двухфакторную аутентификацию
}

// Удаление
sessionStorage.removeItem("tempData");

Характеристики:

• Размер: 5-10 MB
• API: Синхронный
• Отправка на сервер: Нет
• Время жизни: До закрытия tab/окна браузера
• Область: Отдельное для каждой tab/окна
• Доступ: Только JavaScript
• Использование: Временные данные, мастер-процессы

4. IndexedDB

IndexedDB — полнофункциональная база данных в браузере для структурированных данных и больших объемов.

const dbRequest = indexedDB.open("appDB", 1);

dbRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  // Создать хранилище объектов
  const store = db.createObjectStore("users", { keyPath: "id" });
  store.createIndex("email", "email", { unique: true });
};

dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite");
  const store = transaction.objectStore("users");
  
  // Добавить
  store.add({
    id: 1,
    email: "alice@example.com",
    name: "Alice",
    posts: [{ id: 1, title: "First post" }]
  });
  
  // Получить
  const getRequest = store.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };
  
  // Запрос по индексу
  const emailIndex = store.index("email");
  const emailRequest = emailIndex.get("alice@example.com");
  emailRequest.onsuccess = () => {
    console.log(emailRequest.result);
  };
  
  // Изменить
  const user = { id: 1, email: "alice@example.com", name: "Alice Updated" };
  store.put(user);
  
  // Удалить
  store.delete(1);
  
  // Получить все
  const allRequest = store.getAll();
  allRequest.onsuccess = () => {
    console.log(allRequest.result);
  };
};

Характеристики:

• Размер: 100+ MB (зависит от браузера и квот)
• API: Асинхронный (не блокирует UI)
• Отправка на сервер: Нет
• Типы данных: Любые JavaScript объекты, File, Blob
• Индексы: Поддержка индексов и сложных запросов
• Доступ: Только JavaScript
• Область: Одна origin

5. Cache API

Cache API — специализированный API для работы с кешом, часто используется с Service Workers для offline-first приложений.

// Открыть или создать кеш
caches.open("v1").then((cache) => {
  // Добавить URL в кеш
  cache.add("/api/users");
  
  // Добавить несколько URL
  cache.addAll(["/index.html", "/style.css", "/app.js"]);
  
  // Добавить с Response объектом
  const response = new Response(JSON.stringify({ id: 1 }), {
    headers: { "Content-Type": "application/json" }
  });
  cache.put("/api/data", response);
  
  // Получить из кеша
  cache.match("/api/users").then((response) => {
    if (response) {
      console.log(response.json());
    }
  });
});

// Использование в Service Worker для offline
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Характеристики:

• Размер: 50+ MB
• API: Асинхронный
• Отправка на сервер: Нет
• Использование: Кеширование сетевых ответов
• Область: Одна origin
• Зависимость: Требует Service Worker

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

Рекомендации по использованию

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

• Аутентификационных токенов (с httpOnly флагом)
• Данных, которые должны передаваться на сервер
• Cross-origin запросов (с sameSite контролем)

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

• Пользовательских настроек (тема, язык)
• Небольших данных до 1 MB
• Данных, которые нужны между сессиями

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

• Временных данных текущей сессии
• Шагов в многошаговых формах
• Данных, которые не должны сохраняться

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

• Структурированных данных в большом объёме
• Offline-first приложений
• Поиска по индексам
• PWA приложений

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

• Кеширования сетевых ответов
• Offline функциональности с Service Workers
• Предварительной загрузки ресурсов

Пример: Offline-first приложение

// Сохранить в IndexedDB
async function saveUserData(user) {
  const db = await openDB();
  const tx = db.transaction("users", "readwrite");
  await tx.store.put(user);
}

// Синхронизировать при online
window.addEventListener("online", async () => {
  const users = await getAllUsers();
  for (const user of users) {
    try {
      await fetch("/api/users", {
        method: "POST",
        body: JSON.stringify(user)
      });
    } catch (e) {
      console.error("Sync failed");
    }
  }
});

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

• localStorage/sessionStorage уязвимы для XSS — не сохраняй токены
• Cookies с httpOnly флагом защищены от XSS — используй их для аутентификации
• Все браузерные хранилища доступны в DevTools — не хрань чувствительные данные
• Шифруй чувствительные данные перед сохранением
• Проверяй данные с сервера перед использованием