Даты, Map, Set, ArrayBuffer

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

Базовые методы включают:

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

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

Работа с типами данных

Idb-keyval умеет хранить любые объекты, поддерживаемые сериализацией через structured clone algorithm, включая Date, Map, Set и ArrayBuffer.

Date

Дата хранится в виде полноценного объекта Date, а не строки. Это значит, что после извлечения из IndexedDB сохраняются все методы объекта Date.

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

const now = new Date();
await set('currentDate', now);

const storedDate = await get('currentDate');
console.log(storedDate instanceof Date); // true
console.log(storedDate.toISOString());   // корректная дата

Важно помнить: при передаче дат через JSON они превращаются в строки, но idb-keyval сохраняет их как объекты, что позволяет работать с ними без конверсии.

Map

Map хранится целиком со всеми ключами и значениями. Это полезно для случаев, когда требуется ассоциативный массив с объектными ключами.

const map = new Map([
    ['name', 'Alice'],
    ['age', 25]
]);
await set('userMap', map);

const storedMap = await get('userMap');
console.log(storedMap instanceof Map); // true
console.log(storedMap.get('name'));    // Alice

Map сохраняет порядок вставки элементов, что гарантирует предсказуемое извлечение данных.

Set

Set сохраняет уникальные значения, что удобно для хранения коллекций без дубликатов.

const setData = new Set([1, 2, 3, 2]);
await set('numbers', setData);

const storedSet = await get('numbers');
console.log(storedSet instanceof Set); // true
console.log([...storedSet]);           // [1, 2, 3]

Set позволяет легко проверять наличие элемента с помощью метода has, а также поддерживает итерацию в сохранённом порядке.

ArrayBuffer

ArrayBuffer используется для хранения бинарных данных. Idb-keyval сохраняет их напрямую без преобразования в Base64 или другие форматы.

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
view.set([10, 20, 30, 40, 50, 60, 70, 80]);

await set('binaryData', buffer);

const storedBuffer = await get('binaryData');
const storedView = new Uint8Array(storedBuffer);
console.log(storedView); // Uint8Array(8) [10, 20, 30, 40, 50, 60, 70, 80]

Работа с ArrayBuffer удобна для хранения изображений, аудио или любых других бинарных форматов.

Асинхронные операции и обработка ошибок

Все операции idb-keyval возвращают промисы, что упрощает обработку ошибок и последовательность действий.

try {
    await set('key', 'value');
    const value = await get('key');
    console.log(value);
} catch (error) {
    console.error('Ошибка при работе с IndexedDB:', error);
}

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

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

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

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

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

await set('customKey', 123, customStore);
const value = await get('customKey', customStore);
console.log(value); // 123

Это полезно для разделения данных по категориям или создания отдельных слоёв для разных приложений.

Итоги по поддерживаемым коллекциям

  • Date — сохраняется как объект, методы работают сразу после извлечения.
  • Map — ключи и значения полностью сохраняются, порядок элементов сохраняется.
  • Set — уникальные значения, порядок вставки сохраняется.
  • ArrayBuffer — бинарные данные сохраняются без преобразования.

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

Оглавление