Использование в чистом JavaScript без фреймворка

Idb-keyval — это минималистичная библиотека для работы с IndexedDB в браузерах. Она предоставляет удобный API для сохранения, чтения и удаления данных без необходимости писать громоздкий код для управления транзакциями и объектными хранилищами.

Библиотека использует стандарт IndexedDB под капотом, но оборачивает его в асинхронные функции с промисами, что делает работу с данными простой и предсказуемой.

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

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

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

Также можно установить через npm для использования в сборках с модульной системой:

npm install idb-keyval

В ES-модулях:

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

Основные функции

set(key, value)

Сохраняет значение по ключу. Любой объект, поддерживаемый IndexedDB, может быть сохранён.

import { set } from 'idb-keyval';

set('user', { name: 'Алексей', age: 30 })
  .then(() => console.log('Данные сохранены'))
  .catch(err => console.error('Ошибка сохранения', err));

Особенности:

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

get(key)

Получает значение по ключу. Если ключ отсутствует, возвращается undefined.

import { get } from 'idb-keyval';

get('user')
  .then(value => console.log(value))
  .catch(err => console.error('Ошибка чтения', err));

Особенности:

  • Простое извлечение данных без необходимости открывать транзакцию.
  • Работает с любыми типами данных, поддерживаемыми IndexedDB.

del(key)

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

import { del } from 'idb-keyval';

del('user')
  .then(() => console.log('Данные удалены'))
  .catch(err => console.error('Ошибка удаления', err));

Особенности:

  • Возвращает промис, что позволяет обрабатывать ошибки асинхронно.

clear()

Полностью очищает хранилище.

import { clear } from 'idb-keyval';

clear()
  .then(() => console.log('Хранилище очищено'))
  .catch(err => console.error('Ошибка очистки', err));

Особенности:

  • Используется для удаления всех ключей без необходимости перечислять их.
  • Подходит для реализации функции «сброса данных».

keys()

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

import { keys } from 'idb-keyval';

keys()
  .then(allKeys => console.log(allKeys))
  .catch(err => console.error('Ошибка получения ключей', err));

Особенности:

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

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

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

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

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

set('session', { token: 'abc123' }, customStore)
  .then(() => console.log('Сессия сохранена'));

get('session', customStore)
  .then(data => console.log(data));

Особенности:

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

Продвинутые методы

Использование транзакций

Для пакетного обновления можно использовать транзакции напрямую через idb-keyval:

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

const store = createStore('app-db', 'batch-store');

const batchData = [
  ['user1', { name: 'Анна' }],
  ['user2', { name: 'Игорь' }]
];

Promise.all(batchData.map(([key, value]) => set(key, value, store)))
  .then(() => console.log('Все данные сохранены'));

Особенности:

  • Позволяет выполнять массовые операции с сохранением асинхронной природы.
  • Не требует ручного открытия транзакций через IndexedDB API.

Обработка ошибок и совместимость

  • Все функции idb-keyval возвращают промисы, поэтому обработка ошибок должна выполняться через .catch() или try/catch с async/await.
  • Библиотека поддерживается в современных браузерах, включая Chrome, Firefox, Edge, Safari.
  • Для старых браузеров может потребоваться полифилл IndexedDB.

Примеры использования с async/await

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

async function manageData() {
  try {
    await set('theme', 'dark');
    const theme = await get('theme');
    console.log('Текущая тема:', theme);
    await del('theme');
    console.log('Тема удалена');
  } catch (err) {
    console.error('Ошибка работы с IndexedDB', err);
  }
}

manageData();

Особенности:

  • Код становится более читаемым и линейным.
  • Полностью сохраняется асинхронная природа операций.

Рекомендации по использованию

  • Использовать idb-keyval для кеширования данных и настроек пользователя.
  • Не хранить большие бинарные данные без разделения на части.
  • Для сложных структур данных создавать отдельные хранилища через createStore.
  • Использовать async/await для упрощения чтения и записи данных, особенно при последовательных операциях.

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

Оглавление