Какие знаешь хранилища в JS?

Хранилища данных в JavaScript

В JavaScript существует несколько типов хранилищ, которые можно разделить на клиентские (браузерные) и серверные. Здесь я подробно остановлюсь на клиентских хранилищах, так как они наиболее актуальны для Frontend разработки.

1. Web Storage API

Это простой API ключ-значение, который включает два механизма:

localStorage

• Данные сохраняются бессрочно и доступны между сессиями
• Объем ~5-10 МБ в зависимости от браузера
• Синхронный API (блокирует основной поток)

// Пример использования
localStorage.setItem('user', JSON.stringify({name: 'John'}));
const user = JSON.parse(localStorage.getItem('user'));
localStorage.removeItem('user');
localStorage.clear();

sessionStorage

• Данные доступны только в течение сессии (закрытие вкладки = очистка)
• Объем аналогичен localStorage
• Изолирован для каждой вкладки

// Пример использования
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');

2. IndexedDB

Мощная NoSQL база данных для хранения больших объемов структурированных данных:

• Асинхронная работа (не блокирует основной поток)
• Поддерживает индексы для быстрого поиска
• Объем может достигать 50-80% от свободного места на диске
• Поддерживает транзакции

// Пример открытия базы данных
const request = indexedDB.open('myDatabase', 1);

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

request.onsuccess = (event) => {
  const db = event.target.result;
  // Работа с базой данных
};

3. Cookies

Традиционный способ хранения небольших объемов данных:

• Автоматически отправляются с каждым HTTP-запросом
• Ограничение ~4 КБ на домен
• Могут иметь срок действия и другие атрибуты

// Установка cookie
document.cookie = "username=John; max-age=3600; path=/";

// Чтение всех cookies
const cookies = document.cookie;

4. Cache API

Часть Service Worker API, предназначен для хранения сетевых запросов и ответов:

• Кэширование ресурсов для офлайн-работы
• Программный контроль над кэшем
• Используется в Progressive Web Apps (PWA)

// Пример кэширования
caches.open('my-cache').then(cache => {
  cache.add('/styles/main.css');
  cache.addAll(['/', '/index.html']);
});

5. Web SQL Database (устаревшее)

Хотя эта технология была стандартизирована, сейчас она считается устаревшей и не рекомендуется к использованию. Ее заменил IndexedDB.

6. Современные решения для состояния приложения

Redux/MobX/Zustand

Библиотеки для управления состоянием приложения, которые могут использовать перечисленные выше механизмы для сохранения состояния:

// Пример с Redux Persist
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // использует localStorage

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

Критерии выбора хранилища

При выборе хранилища учитывайте:

1. Объем данных:

   • Малый объем (до 5 МБ) → localStorage/cookies
   • Большой объем → IndexedDB

2. Структура данных:

   • Простые ключ-значение → Web Storage
   • Сложные объекты с индексами → IndexedDB

3. Доступность:

   • Только во время сессии → sessionStorage
   • Постоянный доступ → localStorage/IndexedDB

4. Производительность:

   • Синхронные операции → Web Storage (осторожно с большими данными)
   • Асинхронные операции → IndexedDB

5. Тип данных:

   • Строки → Web Storage
   • Бинарные данные → IndexedDB

Важные практики и ограничения

• Все клиентские хранилища небезопасны — не храните чувствительные данные
• Очистка данных — браузеры могут очищать хранилища при нехватке места
• Синхронизация между вкладками — используйте событие storage для синхронизации
• Квоты хранилища — обрабатывайте ошибки переполнения

// Обработка ошибок localStorage
try {
  localStorage.setItem('key', 'value');
} catch (e) {
  if (e.code === 22 || e.code === 1014) {
    console.error('Хранилище переполнено');
  }
}

На практике я часто комбинирую разные типы хранилищ: localStorage для настроек пользователя, IndexedDB для офлайн-данных приложения, а Cache API для статических ресурсов. Современные фреймворки типа React/Vue обычно используют специализированные библиотеки для синхронизации состояния приложения с клиентским хранилищем.