Skip to content

Storage Kit

Реактивные localStorage, sessionStorage, IndexedDB и cookies для Vue 3 (и React) — TTL, шифрование, миграции схемы, undo/redo и синхронизация между вкладками.

Единое реактивное API для всех хранилищ

useStorage работает с localStorage, sessionStorage, IndexedDB и in‑memory через единый интерфейс. Реактивные Ref для Vue и useSyncExternalStore для React автоматически синхронизируют состояние с выбранным бекендом. Поддерживаются TTL, миграции схем, шифрование, сжатие, подпись, debounce/throttle и история изменений.

Миграции схем, TTL и шифрование AES-GCM

Версионируйте данные и автоматически применяйте цепочки миграций (up/down) при изменении структуры. Устанавливайте TTL для автоматического удаления устаревших записей при чтении. Шифруйте данные через Web Crypto API (AES-GCM) с выводом ключа из пароля (PBKDF2) или готовым CryptoKey, включая ротацию ключей.

Синхронизация между вкладками, Undo/redo и throttle

Включите sync для мгновенного распространения изменений через BroadcastChannel (с fallback на storage event). Опциональный лидер (navigator.locks) разрешает конфликты по принципу last‑write‑wins. Встроенная история (history: n) даёт undo/redo без дополнительного кода, а debounce/throttle контролируют частоту записи.

Глубокая интеграция с экосистемой Vue и React

Vue-плагин задаёт глобальный префикс, target, сериализатор и обработчик ошибок. Nuxt-модуль автоимпортирует все композаблы и делает useCookie SSR‑совместимым (с H3 на сервере). React‑версия использует useSyncExternalStore, разделяя один движок с Vue. Отдельные entry points для Pinia, DevTools и тестирования.

Производительность, SSR и DevTools

Асинхронные адаптеры (включая IndexedDB) не блокируют рендеринг; isReady позволяет показать скелетон до загрузки. На сервере используется in‑memory fallback. Встроенный DevTools-инспектор показывает все экземпляры, их значения, TTL и историю, а таймлайн логирует каждое изменение, миграцию и ошибку.