Многим веб-приложениям необходимо использовать базу данных для хранения сведений о пользователе или его предпочтений. Но знаете ли вы, что в каждом современном веб-браузере есть встроенная база данных?

IndexedDB — это клиентская база данных NoSQL, которая позволяет хранить и извлекать структурированные данные в веб-браузере пользователя.

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

Настройка вашей базы данных

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

открыть Метод принимает два аргумента: имя и необязательный номер версии. Аргумент name представляет имя вашей базы данных. Номер версии указывает версию базы данных, с которой ваше приложение должно работать. Значение по умолчанию равно нулю.

Вот как создать открытый запрос:

константа openRequest = indexedDB.open("пользователи БД", 1);

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

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

openRequest.onsuccess = функция (событие) {
константа БД = событие.Цель.Результат;
консоль.бревно("База данных создана", дБ);
};

В приведенном выше примере событие успеха обрабатывается путем регистрации объекта базы данных.

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

openRequest.onerror = функция (событие) {
// ...
};

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

Создание хранилища объектов

Хранилище объектов похоже на таблицу в серверных реляционных базах данных. Вы можете использовать хранилище объектов для хранения пар ключ-значение.

Вы должны создавать хранилища объектов в ответ на обновлениенеобходимо событие. Это событие запускается, когда вы создаете новую версию базы данных или обновляете существующую версию. Это гарантирует, что база данных настроена правильно и обновлена ​​до того, как вы добавите какие-либо данные.

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

В объекте конфигурации вы должны определить первичный ключ. Вы можете определить первичный ключ, указав путь к ключу, который является свойством, которое всегда существует и содержит уникальное значение. Кроме того, вы можете использовать генератор ключей, установив ключПуть собственность на «идентификатор” и автоматическое приращение собственность на истинный в вашем объекте конфигурации.

Например:

openRequest.onupgradeneeded = функция (событие) {
константа БД = событие.Цель.Результат;

// Создаем хранилище объектов
константа userObjectStore = db.createObjectStore("пользовательский магазин", {
путь к ключу: "идентификатор",
автоматическое приращение: истинный,
});
}

В этом примере создается хранилище объектов с именем «userStore» в вашей базе данных и задается его первичный ключ с автоматически увеличивающимся идентификатором.

Определение индексов

В IndexedDB индекс — это способ более эффективно организовывать и извлекать данные. Это позволяет выполнять поиск в хранилище объектов и сортировать его на основе проиндексированных свойств.

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

userObjectStore.createIndex("имя", "имя", { уникальный: ЛОЖЬ });
userObjectStore.createIndex("электронная почта", "электронная почта", { уникальный: истинный });

Этот блок кода выше определяет два индекса: «имя» и «электронная почта» на пользовательский объектсторе. Индекс «имя» не уникален, что означает, что несколько объектов могут иметь одно и то же значение имени, в то время как индекс «электронная почта» уникален, гарантируя, что никакие два объекта не могут иметь одинаковое значение электронной почты.

Вот полный пример того, как вы можете справиться с обновлениенеобходимо событие:

openRequest.onupgradeneeded = функция (событие) {
константа БД = событие.Цель.Результат;

// Создаем хранилище объектов
константа userObjectStore = db.createObjectStore("пользовательский магазин", {
путь к ключу: "идентификатор",
автоматическое приращение: истинный,
});

// Создаем индексы
userObjectStore.createIndex("имя", "имя", { уникальный: ЛОЖЬ });
userObjectStore.createIndex("электронная почта", "электронная почта", { уникальный: истинный });
};

Добавление данных в IndexedDB

Транзакция в IndexedDB — это способ сгруппировать несколько операций чтения и записи в одну операцию. Чтобы обеспечить согласованность и целостность данных, в случае сбоя одной из операций внутри транзакции IndexedDB откатывает все операции.

Чтобы добавить данные в базу данных IndexedDB, вам нужно создать транзакцию в хранилище объектов, в которое вы хотите добавить данные, а затем использовать добавлять() метод транзакции для добавления данных.

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

Затем позвоните в хранилище объектов() метода транзакции и передайте имя хранилища объектов, в которое вы хотите добавить данные. Этот метод возвращает ссылку на хранилище объектов.

Наконец, позвоните в добавлять() в хранилище объектов и передайте данные, которые вы хотите добавить:

константа добавитьUserData = (пользовательские данные, дБ) => {
// Открытие транзакции
константа транзакция = db.transaction("пользовательский магазин", "читай пиши");

// Добавляем данные в хранилище объектов
константа userObjectStore = transaction.objectStore("пользовательский магазин");

// Делаем запрос на добавление userData
константа запрос = userObjectStore.add(userData);

// Обработка события успеха
запрос.при успехе = функция (событие) {
//...
};

// Обработка ошибки
запрос.onerror = функция (событие) {
//...
};
};

Эта функция создает транзакцию с хранилищем объектов «userStore» и устанавливает режим «чтение-запись». Затем он получает хранилище объектов и добавляет данные пользователя к нему с помощью добавлять метод.

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

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

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

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

константа получитьданные пользователя = (идентификатор, дб) => {
константа транзакция = db.transaction("пользовательский магазин", "только для чтения");
константа userObjectStore = transaction.objectStore("пользовательский магазин");

// Делаем запрос на получение данных
константа запрос = userObjectStore.get (идентификатор);

запрос.при успехе = функция (событие) {
консоль.log(запрос.результат);
};

запрос.onerror = функция (событие) {
// Обработка ошибки
};
};

Эта функция создает транзакцию с хранилищем объектов «userStore» и устанавливает режим «только для чтения». Затем он извлекает пользовательские данные с соответствующим идентификатором из хранилища объектов.

Обновление данных с помощью IndexedDB

Для обновления данных в IndexedDB необходимо создать транзакцию с режимом «чтение-запись». Продолжите, извлекая объект, который вы хотите обновить, используя получать() метод. Затем измените объект и вызовите метод помещать() в хранилище объектов, чтобы сохранить обновленный объект обратно в базу данных.

константа обновитьUserData = (идентификатор, пользовательские данные, дб) => {
константа транзакция = db.transaction("пользовательский магазин", "читай пиши");
константа userObjectStore = transaction.objectStore("пользовательский магазин");

// Делаем запрос на получение данных
константа getRequest = userObjectStore.get(id);

// Обработка события успеха
getRequest.onsuccess = функция (событие) {
// Получить старые данные пользователя
константа пользователь = событие.цель.результат;

// Обновляем пользовательские данные
user.name = userData.name;
user.email = userData.email;

// Делаем запрос на обновление данных
константа putRequest = userObjectStore.put(пользователь);

putRequest.onsuccess = функция (событие) {
// Обработка успеха
};

putRequest.onerror = функция (событие) {
// Обработка ошибки
};
};

getRequest.onerror = функция (событие) {
// Обработка ошибки
};
};

Эта функция создает транзакцию для получения и обновления данных вашей базы данных.

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

Для удаления данных из IndexedDB необходимо создать транзакцию с режимом «чтение-запись». Затем позвоните в удалить() метод в хранилище объектов для удаления объекта из базы данных:

константа удалитьUserData = (идентификатор, дб) => {
константа транзакция = db.transaction("пользовательский магазин", "читай пиши");
константа userObjectStore = transaction.objectStore("пользовательский магазин");

// Делаем запрос на удаление данных
константа запрос = userObjectStore.delete (идентификатор);

запрос.при успехе = функция (событие) {
// Обработка успеха
};

запрос.onerror = функция (событие) {
// Обработка ошибки
};
};

Эта функция создает транзакцию, которая удаляет данные с соответствующим идентификатором из вашего хранилища объектов.

Следует ли вам использовать IndexedDB или localStorage?

Выбор между IndexedDB и другими клиентскими базами данных, такими как localStorage, зависит от требований вашего приложения. Используйте localStorage для простого хранения небольших объемов данных. Выберите IndexedDB для больших наборов структурированных данных, требующих запросов и фильтрации.