Что такое IndexedDB и зачем нужна обёртка

IndexedDB — это встроенная в браузеры асинхронная база данных для хранения структурированных данных. Она позволяет хранить большие объёмы информации на стороне клиента, включая объекты, массивы и бинарные данные (например, изображения или файлы). Основные характеристики IndexedDB:

  • Асинхронность — все операции выполняются через события или промисы, что предотвращает блокировку интерфейса.
  • Хранение объектов — можно сохранять не только строки, но и сложные объекты JavaScript.
  • Индексы — позволяют быстро искать данные по ключам или по свойствам объектов.
  • Транзакции — обеспечивают целостность данных при чтении и записи.

Работа с IndexedDB напрямую требует написания большого объёма кода для открытия базы, создания хранилищ объектов, индексов и управления транзакциями. Ошибки в обработке событий или транзакций легко приводят к нестабильной работе приложения.

Зачем нужна обёртка

Обёртка над IndexedDB, такая как idb-keyval, упрощает взаимодействие с базой, предоставляя интерфейс, похожий на Map или локальное хранилище (localStorage), но с преимуществами IndexedDB:

  • Простые операции записи и чтения без явного управления транзакциями.
  • Поддержка промисов вместо работы с событиями, что делает код чище и более читаемым.
  • Минимальный код для сохранения и получения данных, без необходимости ручного создания хранилищ объектов и индексов.

idb-keyval подходит для сценариев, когда нужно быстро хранить и извлекать небольшие объёмы данных: настройки пользователя, кэшированные ответы API, временные данные между сессиями.

Установка и подключение

Для использования idb-keyval достаточно установить пакет через npm:

npm install idb-keyval

Или подключить через CDN:

<script type="module">
  import { get, set, del, clear, keys } from 'https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/idb-keyval.mjs';
</script>

После подключения становятся доступны основные методы работы с базой.

Основные методы

set(key, value)

Сохраняет значение по ключу. Возвращает промис, который резолвится после успешной записи.

import { set } from 'idb-keyval';

set('username', 'alice').then(() => {
  console.log('Данные сохранены');
});

get(key)

Получает значение по ключу. Возвращает промис с результатом.

import { get } from 'idb-keyval';

get('username').then(value => {
  console.log(value); // 'alice'
});

del(key)

Удаляет запись по ключу.

import { del } from 'idb-keyval';

del('username').then(() => {
  console.log('Данные удалены');
});

clear()

Удаляет все записи из хранилища.

import { clear } from 'idb-keyval';

clear().then(() => {
  console.log('Все данные очищены');
});

keys()

Возвращает массив всех ключей в хранилище.

import { keys } from 'idb-keyval';

keys().then(allKeys => {
  console.log(allKeys); // ['username', 'settings']
});

Работа с собственными базами и хранилищами

По умолчанию idb-keyval использует базу keyval-store и хранилище keyval. Можно создавать свои базы и хранилища для организации данных:

import { Store, set, get } from 'idb-keyval';

const customStore = new Store('my-database', 'my-store');

set('theme', 'dark', customStore);
get('theme', customStore).then(console.log);

Это удобно для разделения данных по типам или модулям приложения.

Асинхронная работа и обработка ошибок

Все методы idb-keyval возвращают промисы, поэтому для обработки ошибок можно использовать .catch или async/await с try/catch:

import { set, get } from 'idb-keyval';

async function saveSettings() {
  try {
    await set('volume', 80);
    const volume = await get('volume');
    console.log(volume);
  } catch (error) {
    console.error('Ошибка работы с IndexedDB', error);
  }
}

Асинхронная модель позволяет писать код линейно, без вложенных обработчиков событий, что делает его более понятным и поддерживаемым.

Преимущества idb-keyval перед чистым IndexedDB

  1. Минимизация шаблонного кода: не нужно вручную открывать базы и транзакции.
  2. Удобный интерфейс, схожий с Map или localStorage.
  3. Поддержка промисов и async/await, упрощает работу с асинхронностью.
  4. Возможность легко создавать отдельные базы и хранилища для модульной организации данных.
  5. Малый размер библиотеки и отсутствие сложных зависимостей.

Сценарии использования

  • Кэширование данных API для офлайн-доступа.
  • Хранение настроек и предпочтений пользователя.
  • Временное хранение промежуточных данных между сессиями.
  • Организация клиентских баз данных для SPA без сложной серверной логики.

idb-keyval идеально подходит там, где нужна надежная, асинхронная, но простая база данных на стороне клиента без необходимости писать громоздкий код на чистом IndexedDB.

Оглавление