Аудит хранимых данных в DevTools

Библиотека idb-keyval предоставляет высокоуровневый интерфейс для работы с IndexedDB, позволяя хранить пары «ключ–значение» без необходимости напрямую управлять транзакциями и объектными хранилищами. Она обеспечивает удобные методы для сохранения, получения, удаления и перечисления данных, а также поддерживает промисы, что делает асинхронную работу с IndexedDB значительно проще.

Базовые методы библиотеки:

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

Подключение и инициализация

Idb-keyval можно подключить через npm:

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

Или использовать через CDN:

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

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

import { Store } from 'idb-keyval';

const customStore = new Store('custom-db', 'custom-store');

Методы библиотеки поддерживают передачу объекта Store, если нужно работать с конкретным хранилищем.

Работа с ключами и значениями

Idb-keyval поддерживает любые сериализуемые в IndexedDB типы: объекты, массивы, строки, числа, булевы значения и даже Blob или ArrayBuffer.

Пример сохранения объекта:

await set('user-settings', { theme: 'dark', fontSize: 14 });
const settings = await get('user-settings');
console.log(settings); // { theme: 'dark', fontSize: 14 }

Удаление и очистка данных:

await del('user-settings'); // удаляет конкретный ключ
await clear(); // очищает все хранилище

Перечисление и аудит данных

Для аудита хранимых данных в DevTools важно иметь возможность просматривать все ключи и значения.

  • Получение всех ключей:
const allKeys = await keys();
console.log(allKeys);
  • Получение всех пар «ключ–значение»:
import { entries } from 'idb-keyval';

const allEntries = await entries();
allEntries.forEach(([key, value]) => {
    console.log(key, value);
});

Этот подход позволяет быстро проверить, какие данные сохранились, и убедиться в корректности структуры хранилища.

Взаимодействие с DevTools

Chrome DevTools и другие современные браузеры поддерживают IndexedDB напрямую:

  1. Вкладка Application → IndexedDB.
  2. Выбор базы и хранилища (например, keyval-db → keyval-store).
  3. Просмотр всех ключей и значений в табличном виде.

Использование entries() и keys() в коде удобно для логирования данных перед аудитом в DevTools или для отладки работы приложения.

Продвинутые техники аудита

  • Фильтрация и поиск по ключам: При большом объеме данных можно использовать keys() для получения списка ключей и фильтровать их через JavaScript.
const userKeys = (await keys()).filter(key => key.startsWith('user-'));
  • Сравнение версий данных: Для отслеживания изменений можно хранить контрольные суммы или версии объектов и периодически сравнивать их с текущими данными.
const previousData = await get('user-settings-v1');
const currentData = await get('user-settings');
if (JSON.stringify(previousData) !== JSON.stringify(currentData)) {
    console.log('Данные изменились');
}
  • Массивное удаление по условию: Можно комбинировать entries() с условием для удаления устаревших данных.
const allEntries = await entries();
for (const [key, value] of allEntries) {
    if (value.expired) {
        await del(key);
    }
}

Асинхронное логирование состояния

Idb-keyval полностью поддерживает промисы, что делает возможным логирование состояния хранилища в любой момент без блокировки UI:

async function auditStore() {
    const allEntries = await entries();
    console.table(allEntries);
}
auditStore();

Такой метод позволяет создавать отчеты о текущем состоянии IndexedDB, анализировать структуру данных и выявлять потенциальные ошибки или дублирование.

Настройка пользовательских хранилищ для аудита

При больших проектах может быть полезно разделять данные по контекстам:

const settingsStore = new Store('app-db', 'settings-store');
const cacheStore = new Store('app-db', 'cache-store');

Каждое хранилище можно аудировать отдельно:

console.log(await entries(settingsStore));
console.log(await entries(cacheStore));

Это обеспечивает более прозрачное управление данными и упрощает их отладку через DevTools.

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

Оглавление