Объекты и массивы

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

Сохранение объектов

Для сохранения объектов используется метод set(key, value). Любой объект JavaScript можно передать напрямую, и Idb-keyval корректно его сериализует.

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

const user = {
    id: 1,
    name: 'Алексей',
    roles: ['admin', 'editor'],
    preferences: {
        theme: 'dark',
        notifications: true
    }
};

await set('currentUser', user);
  • Ключ (key) может быть строкой, числом или объектом с уникальной идентификацией.
  • Значение (value) поддерживает объекты, массивы, примитивы, даты и даже Map или Set.
  • В отличие от localStorage, Idb-keyval не требует ручной сериализации и десериализации данных.

Чтение объектов

Извлечение данных осуществляется с помощью метода get(key). Получаемое значение сохраняет исходную структуру объекта.

const currentUser = await get('currentUser');
console.log(currentUser.name); // Алексей
console.log(currentUser.preferences.theme); // dark

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

Работа с массивами

Массивы сохраняются и извлекаются аналогично объектам:

const tasks = [
    { id: 1, title: 'Сделать отчет', done: false },
    { id: 2, title: 'Проверить почту', done: true }
];

await set('tasks', tasks);

const storedTasks = await get('tasks');
console.log(storedTasks.length); // 2
console.log(storedTasks[0].title); // Сделать отчет
  • Любые вложенные массивы внутри объектов корректно сохраняются.
  • Возможность хранения массивов объектов делает Idb-keyval удобным для реализации оффлайн-режима или кэширования данных.

Обновление и модификация объектов и массивов

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

const user = await get('currentUser');
user.preferences.notifications = false;
await set('currentUser', user);

Для массивов можно использовать те же методы:

let tasks = await get('tasks');
tasks.push({ id: 3, title: 'Позвонить клиенту', done: false });
await set('tasks', tasks);

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

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

Удаление объектов и массивов выполняется методом del(key):

import { del } from 'idb-keyval';

await del('currentUser');
await del('tasks');

Если необходимо полностью очистить хранилище, используется clear():

import { clear } from 'idb-keyval';

await clear();

Особенности сериализации

  • Idb-keyval использует встроенные возможности IndexedDB, которые автоматически сериализуют объекты и массивы с помощью структуры structuredClone.
  • Поддерживаются вложенные объекты и массивы любой глубины.
  • Методы корректно работают с Date, Map, Set и ArrayBuffer.

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

Все операции возвращают Promise, что позволяет использовать async/await:

try {
    const settings = await get('appSettings');
    if (!settings) {
        await set('appSettings', { language: 'ru', version: 1 });
    }
} catch (error) {
    console.error('Ошибка при работе с IndexedDB:', error);
}

Обработка ошибок необходима для предотвращения сбоев при работе с большим объёмом данных или ограничениями браузера.

Практические рекомендации

  • Для хранения часто изменяемых объектов лучше использовать небольшие ключи с независимыми объектами, чтобы уменьшить вероятность конфликтов при одновременных операциях.
  • Массивы с большим количеством элементов следует обновлять выборочно, а не полностью перезаписывать, если это возможно, для оптимизации производительности.
  • Использование вложенных объектов и массивов не требует дополнительной сериализации, что упрощает работу с оффлайн-кэшами и состоянием приложений.

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

Оглавление