IndexDB API

Создание, открытие и удаление базы данных

Indexed Database API или IndexedDB API предоставляет функционал для работы с базой данных, которая находится в браузере. Данная база данных называется IndexedDB. Ее особенностью является то, что это нереляционная база данных (то, что называют NoSQL). Основная идея IndexedDB заключается в хранении объектов под определенными ключами.

Открытие/создание базы данных IndexDB

Для обращения к функциональности IndexedDB применяется свойство indexedDB объекта window:

const dbFactory = window.indexedDB;
console.log(dbFactory);    // IDBFactory{}

Это свойство представляет объект типа IDBFactory, который предоставляет функционал для работы с базой данных. В частности, с помощью его метода open() можно открыть базу данных.

open(name)
open(name, version)

В качестве параметра в метод open() передается имя базы данных. В качестве второго необязательного параметра можно передать номер версии базы данных, который по сути определяет схему базы данных, используемую для хранения объектов.

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

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

Возвращаемое значение метода open() — это объект типа IDBOpenDBRequest. Можно сказать, что это объект запроса на открытие соответствующей базы данных.

Для обращения к самой базе данных у объекта IDBOpenDBRequest можно обработать событие success. Оно возникает при успешном открытии базы данных. Для установки обработчика этого события можно использовать свойство onsuccess:

const request = indexedDB.open("test"); // подключаемся к бд test
// при удачном открытии срабатывает событие success
// обрабатываем это событие
request.onsuccess = (event) => {  
    const database = event.target.result;  // обращаемся к базе данных  
    console.log(database.name);            // "Test"  
};

Внутри обработчика события через свойство event.target.result мы можем получить базу данных, которая представляет объект IDBDatabase

Обработка ошибок при открыти базы данных

Однако при попытке отрыть базу данных также может возникнуть ошибка - событие error, например, когда у пользователя нет разрешений в браузере для доступа к базе данных. В этом случае мы можем определеть обработчик события error через свойство onerror:

const request = indexedDB.open("test"); // подключаемся к бд test
// обрабатываем ошибку
request.onerror = (event) => {
    const error = event.target.error;      // Получаем информацию об ошибке  
    console.error(error.message);
};

Отслеживание создания базы данных

При открытии базы данных, если она отсутствует, то она автоматически создается. Поэтому в этом плане неважно, есть у нас база данных или нет. Однако иногда бывает необходимо отследить создание базы данных. В этом случае мы можем использовать событие upgradeneeded, которое вызывается всякий раз, когда либо запрошенная база данных еще не существует и поэтому создается, либо когда запрошенная база данных еще не существует в этой конкретной версии. В обоих случаях вызываемый обработчик событий получает в качестве параметра объект типа IDBVersionChangeEvent. Этот объект позволяет получить старую и новую версию бд. Для установки обработчика события можно использовать свойство onupgradeneeded:

request.onupgradeneeded = (event) => { 
    console.log(event.oldVersion);         // старая версия базы данных 
    console.log(event.newVersion);         // новая версия базы данных 
    const database = event.target.result;  // обращаемся к самой бд
};

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

Получение баз данных

Метод databases() объекта IDBFactory позволяет получить список всех имеющихся баз данных. Этот метод возвращает promise, из которого можно получить данные в виде массива, где каждый элемент представляет объект с двумя свойствами - name (имя базы данных) и version (версия базы данных):

const promise = indexedDB.databases();
promise.then((databases) => console.log(databases));

Например, вывод в моем случае:

(2) [{…}, {…}]
0: {name: 'test', version: 1}
1: {name: 'test2', version: 1}
length: 2
[[Prototype]]: Array(0)

В данном случае видно, что у меня две базы данных - test и test2, у каждой из которых версия 1.

Удаление базы данных

Для удаления базы данных у объекта IDBFactory применяется метод deleteDatabase(), в который передается имя удаляемой базы данных:

indexedDB.deleteDatabase("test2");

Стоит отметить, что этот метод в качестве результата возвращает объект IDBOpenDBRequest (который упоминался выше). Соответственно мы можем обработать события success и error, чтобы определить, успешно ли произошло удаление или произошла ошибка:

const DBDeleteRequest = indexedDB.deleteDatabase("test2");

DBDeleteRequest.onerror = (event) => {
  console.error("Error deleting database.");
};

DBDeleteRequest.onsuccess = (event) => {
  console.log("Database deleted successfully");

  console.log(event.result); // должно быть undefined
};

Если база данных была успешно удалена, то свойство result аргумента в обработчике события success будет не установлено.