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

Подключение через npm

Библиотека idb-keyval предназначена для упрощённой работы с IndexedDB, предоставляя простой асинхронный интерфейс для хранения ключ-значение. Для проектов, использующих Node.js или сборщики модулей, таких как Webpack или Vite, подключение осуществляется через npm:

npm install idb-keyval

После установки модуль импортируется в код:

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

Пояснение ключевых функций:

  • set(key, value) – сохраняет значение по указанному ключу.
  • get(key) – извлекает значение по ключу.
  • del(key) – удаляет значение по ключу.
  • clear() – очищает всю базу данных.
  • keys() – возвращает массив всех ключей в базе.

Также доступна возможность создавать собственные хранилища:

import { Store } from 'idb-keyval';

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

После создания пользовательского хранилища все операции можно выполнять в контексте этого хранилища:

set('username', 'Alice', myStore);
get('username', myStore).then(value => console.log(value));

Подключение через CDN

Для использования в браузере без сборщиков модулей библиотеку можно подключить напрямую через CDN. Пример с использованием jsDelivr:

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

  set('theme', 'dark');
  get('theme').then(value => console.log(value));
</script>

Особенности подключения через CDN:

  • Используется модульный синтаксис import.
  • Можно подключить конкретную версию библиотеки для стабильности.
  • Не требуется установка через npm.

Инициализация и создание собственного хранилища

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

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

const settingsStore = new Store('app-settings', 'settings');

set('language', 'ru', settingsStore);
get('language', settingsStore).then(value => console.log(value));

Преимущества собственного хранилища:

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

Асинхронная природа операций

Все методы библиотеки возвращают Promise, что позволяет использовать их с async/await для упрощения кода:

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

async function saveUser() {
  await set('user', { name: 'Alice', age: 30 });
  const user = await get('user');
  console.log(user); // { name: 'Alice', age: 30 }
}

saveUser();

Особенности работы с асинхронностью:

  • Ошибки при работе с IndexedDB обрабатываются через catch.
  • Можно создавать цепочки операций без блокировки основного потока.
  • Подходит для любых фронтенд-приложений, где требуется хранение больших объёмов данных.

Совместимость и поддержка

  • Поддерживается всеми современными браузерами, включая Chrome, Firefox, Edge и Safari.
  • Не требует дополнительных полифилов для стандартных функций IndexedDB.
  • Поддерживает версии библиотеки с TypeScript-декларациями, что обеспечивает строгую типизацию при использовании в крупных проектах.

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

  1. Установка через npm:
npm install idb-keyval
  1. Импорт модулей:
import { set, get } from 'idb-keyval';
  1. Создание собственного хранилища (опционально):
import { Store } from 'idb-keyval';

const userStore = new Store('user-db', 'users');
  1. Использование методов с асинхронным синтаксисом:
await set('token', 'abc123', userStore);
const token = await get('token', userStore);

Эти шаги обеспечивают корректное подключение и инициализацию библиотеки idb-keyval, создавая основу для эффективной работы с локальным хранилищем IndexedDB.

Оглавление