Бэкенды хранилища

useIndexedDB

Promise-based доступ ключ-значение к object store IndexedDB. Store создаётся автоматически, если ещё не существует.

useIndexedDB<T>(dbName: string, storeName: string, onError?): UseIndexedDBReturn<T>

Методы

Метод	Сигнатура	Описание
get	(key: IDBValidKey) => Promise<T | null>	Прочитать значение по ключу
set	(key: IDBValidKey, value: T) => Promise<void>	Записать значение
delete	(key: IDBValidKey) => Promise<void>	Удалить ключ
keys	() => Promise<IDBValidKey[]>	Все ключи в store
getAll	() => Promise<T[]>	Все значения
clear	() => Promise<void>	Удалить всё в store
count	() => Promise<number>	Количество записей
transaction	<R>(fn: (store: IDBObjectStore) => IDBRequest<R>) => Promise<R>	Сырая IDB-транзакция

Пример

import { useIndexedDB } from 'vue-storage-kit'

interface Blob {
  id: number
  data: ArrayBuffer
}

const idb = useIndexedDB<Blob>('my-db', 'blobs', (err) => console.error(err))

await idb.set(1, { id: 1, data: buffer })
const blob = await idb.get(1)
console.log(await idb.count())

// Сырая транзакция
await idb.transaction((store) => store.put({ id: 2, data: buffer2 }, 2))

await idb.delete(1)
await idb.clear()

useIDBRef

Реактивный Ref, который читает из одного ключа IndexedDB и пишет в него. Полезен, когда нужен тот же реактивный API, что и у useStorage, но на базе IndexedDB.

useIDBRef<T>(
  dbName: string,
  storeName: string,
  key: IDBValidKey,
  defaultValue: T,
): { value: Ref<T>; isReady: Ref<boolean>; error: Ref<StorageError | null> }

import { useIDBRef } from 'vue-storage-kit'

const { value: draft, isReady } = useIDBRef('editor-db', 'drafts', 'post-42', '')

// Как только isReady.value === true, draft отражает сохранённое значение
draft.value = 'Hello, world!' // автоматически записывается обратно в IDB

useCookie

Реактивный Ref на базе document.cookie. Присваивание ref устанавливает cookie. JSON-сериализация с поддержкой Date, Map, Set включена по умолчанию.

При импорте напрямую из vue-storage-kit это клиентский вариант (при SSR чтения возвращают defaultValue, поскольку на сервере нет document). Внутри приложения Nuxt с зарегистрированным модулем vue-storage-kit/nuxt автоимпортированные вызовы useCookie вместо этого разрешаются в SSR-совместимую версию — та же сигнатура, но на базе запроса/ответа H3 на сервере. См. Модуль Nuxt.

useCookie<T>(name: string, options: CookieOptions<T>): Ref<T>

Опции

Опция	Тип	По умолчанию	Описание
defaultValue	T	—	Значение, возвращаемое, когда cookie отсутствует
expires	Date | number	—	Срок действия как Date или количество дней
path	string	'/'	Путь cookie
domain	string	—	Домен cookie
secure	boolean	—	Добавить флаг Secure
sameSite	'strict' | 'lax' | 'none'	—	Атрибут SameSite
httpOnly	boolean	—	Только SSR — передаётся в H3 setCookie; игнорируется браузерами
serializer	Serializer<T>	JSON	Кастомный сериализатор

Примеры

Сессионная cookie (истекает при закрытии браузера):

const consent = useCookie('cookie-consent', { defaultValue: false })
consent.value = true

Постоянная cookie — 30 дней:

const locale = useCookie('locale', {
  defaultValue: 'en',
  expires: 30,
  sameSite: 'lax',
})

Nuxt SSR — один и тот же API работает на сервере и клиенте:

<script setup lang="ts">
// С зарегистрированным модулем vue-storage-kit/nuxt этот автоимпорт разрешается
// в SSR-совместимый useCookie — читает/пишет через H3 на сервере.
const token = useCookie('auth-token', {
  defaultValue: '',
  secure: true,
  httpOnly: true, // учитывается на сервере через H3 setCookie
  sameSite: 'strict',
})
</script>