Добавление объектов в хранилище

Для добавления объектов в хранилище базы данных IndexDB применяется метод add() объекта IDBObjectStore

add(value)
add(value, key)

Первый параметр представляет добавляемое значение. Второй, необязательный параметр представляет свойства ключа - если не указан, то по умолчанию равен null.

Повторюсь, что надо ли указывать ключ, если указывать, то какой именно, зависит от параметров конфигурации, которые используются при создании хранилища:

• keyPath: задает название свойства-ключа объекта

• autoIncrement: при значении true значения ключей генерируются автоматически. По умолчанию значение false (ключи не генерируются)

Что именно и как используется в качестве ключа, определяется различными комбинациями параметров keyPath и autoIncrement:

keyPath	autoIncrement	Описание
Не указано	false	Хранилище объектов может хранить значения произвольного типа (в том числе значения примитивных типов как числа и строки). Однако ключ необходимо явно указывать каждый раз при добавлении нового объекта в базу данных
Указано	false	Хранилище объектов может хранить только объекты (т.е. никаких примитивных типов данных). Однако эти объекты должны иметь свойство с тем же именем, которое указанно в параметре keyPath
Не указано	true	Хранилище объектов может хранить значения произвольного типа (в том числе значения примитивных типов). Ключи объектов генерируются автоматически при добавлении объектов. Однако также можно явным образом указать ключ для объекта
Указано	true	Хранилище объектов может хранить только объекты (т.е. никаких примитивных типов данных). Ключи же называются также, как указано в параметре keyPath. Если у объекта это свойство отсутствует, то значение ключа генерируется автоматически и добавляется к новому объекту. Если же свойство уже существует в объекте, то ключ не генерируется, а в качестве ключа используется уже сохраненное значение

Результат метода add() представляет объект IDBRequest. В случае успешного добавления у этого объекта срабатывает событие success, а его свойство result содержит ключ добавленного объекта. В случае ошибки генерируется событие error вместе с исключением типа DOMException. Для обработки этих событий можно использовать соответственно свойства onsuccess и onerror

Например, добавим один объект:

const request = indexedDB.open("test", 5); // подключаемся к бд test

// при создании или изменении версии базы данных создаем в ней хранилище users
request.onupgradeneeded = (event) => { 
    const db = event.target.result;  // получаем бд
    // ключом является свойство id, и оно автоматически инкрементируется
    db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
};
// при открытии базы данных добавляем в хранилище users 1 объект
request.onsuccess = (event) => { 
    const db = event.target.result;  // получаем бд
    const transaction = db.transaction(["users"], "readwrite"); // создаем транзакцию
    const userStore = transaction.objectStore("users");   // получаем хранилище users

    const tom = {name: "Tom", age: 39};
    const addRequest = userStore.add(tom);     // добавляем объект tom в хранилище userStore
    addRequest.onsuccess = (event) => {
        console.log("Данные успешно добавлены");
        console.log("id добавленной записи:", addRequest.result); // id добавленной записи: 1
    };
};

Здесь в базе данных test создано хранилище "users", в котором в качестве ключа выступает свойство id, и это свойство автоматически инкрементируется при добавлении каждого нового объекта. То есть добавляемый объект в принципе может не содержать подобное свойство.

В данном случае добавляем один объект с двумя свойствами name и age:

const tom = {name: "Tom", age: 39};
const addRequest = userStore.add(tom);

При успешном добавлении addRequest.result содержит ключ - значение свойства id добавленного объекта

addRequest.onsuccess = (event) => {
    console.log("Данные успешно добавлены");
    console.log("id добавленной записи:", addRequest.result); // id добавленной записи: 1
};

То же самое значение можно получить через параметр обработчика и его свойство event.target.result

console.log("id добавленной записи:", event.target.result);

Стоит отметить, что добавление данных не происходит немедленно после вызова метода add(), а завершается лишь через некоторое время. Поэтому для отслеживания операции применяется обработчик onsuccess.

добавим еще несколько объектов:

const bob = {name: "Bob", age: 43};
const sam = {name: "Sam", age: 28};
userStore.add(bob);
userStore.add(sam);

Просмотр содержимого в браузере

Стоит отметить, что современные браузеры позволяют нам просмотреть содержимое IndexDB через инструменты разработчика. Так, в Google Chrome подобная функциональность доступна на вкладке Application при выборе в левом меню пункта Storage/IndexDB: