Какие знаешь особенности хранилищ?

Особенности браузерных хранилищ

Данные в браузере можно хранить несколькими способами. Каждый имеет свои особенности.

1. localStorage

Долговременное хранилище на уровне домена:

// Сохранение
localStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 }));

// Получение
const user = JSON.parse(localStorage.getItem('user'));

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

// Очистка всего
localStorage.clear();

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

• Размер: 5-10 MB на домен
• Время жизни: неограниченно (до явного удаления)
• Доступность: синхронный API
• Безопасность: уязвим для XSS атак
• Кроссвкладочность: синхронизируется между вкладками

Когда использовать: токены, предпочтения пользователя, кеш некритичных данных

2. sessionStorage

Временное хранилище на сессию:

// Похож на localStorage, но данные удаляются при закрытии вкладки
sessionStorage.setItem('tempData', 'value');
const data = sessionStorage.getItem('tempData');

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

• Размер: 5-10 MB
• Время жизни: до закрытия вкладки
• Изолирован между вкладками
• Синхронный API

Когда использовать: временные данные, состояние формы, OTP коды

3. IndexedDB

Мощная база данных в браузере:

const request = indexedDB.open('myDB', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('email', 'email', { unique: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readwrite');
  const objectStore = transaction.objectStore('users');
  
  // Добавление
  objectStore.add({ id: 1, name: 'John', email: 'john@example.com' });
  
  // Поиск
  const getRequest = objectStore.get(1);
  getRequest.onsuccess = () => console.log(getRequest.result);
};

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

• Размер: 50+ MB на домен
• Асинхронный API (медленнее, но не блокирует UI)
• Поддержка индексов и запросов
• Структурированные данные (объекты)
• Транзакции

Когда использовать: кеш больших данных, офлайн-первый подход, синхронизация

4. Cookies

Данные отправляются на сервер с каждым запросом:

// Установка
document.cookie = 'name=John; path=/; secure; samesite=strict';
document.cookie = 'expires=Wed, 09 Jun 2026 10:00:00 UTC';

// Получение
const getCookie = (name) => {
  const match = document.cookie.match(new RegExp(`${name}=([^;]+)`));
  return match ? match[1] : null;
};

console.log(getCookie('name')); // John

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

• Размер: 4 KB на cookie
• Отправляются на сервер автоматически
• Возможны атаки CSRF, XSS
• Флаги: secure, httpOnly, samesite
• Время жизни: настраивается

Когда использовать: аутентификация (токены), отслеживание сессий

5. Web Storage API (Modern)

Новый API для работы с хранилищами:

// Использование unified API
const storage = localStorage; // или sessionStorage

storage.setItem('key', 'value');
const value = storage.getItem('key');
storage.removeItem('key');

// События
window.addEventListener('storage', (event) => {
  console.log(`${event.key} изменилась на ${event.newValue}`);
});

6. Cache API (Service Workers)

Для кеширования HTTP ответов:

// В Service Worker
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/style.css', '/app.js']);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

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

• Кеширует HTTP ответы целиком
• Работает с Service Workers
• Неограниченный размер (но браузер может очистить)
• Асинхронный API

7. Memory Cache (Runtime)

Данные в переменных JavaScript:

class MemoryCache {
  constructor(ttl = 60000) {
    this.cache = new Map();
    this.ttl = ttl;
  }
  
  set(key, value) {
    this.cache.set(key, { value, expire: Date.now() + this.ttl });
  }
  
  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;
    
    if (Date.now() > item.expire) {
      this.cache.delete(key);
      return null;
    }
    return item.value;
  }
}

const cache = new MemoryCache(5000); // TTL 5 сек
cache.set('user', { name: 'John' });
console.log(cache.get('user')); // { name: 'John' }

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

• Очень быстро
• Неограниченный размер (до памяти ОС)
• Теряется при обновлении страницы
• Идеален для runtime кеша

Сравнение

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

• Токены: в memory (не в localStorage!)
• Настройки: localStorage (простой API)
• Большой кеш: IndexedDB
• Сессионные данные: sessionStorage
• Аутентификация: httpOnly cookies на сервере
• Офлайн: Cache API + Service Workers

Золотое правило: никогда не храни чувствительные данные в localStorage или cookies без httpOnly флага.