Многим веб-приложениям необходимо использовать базу данных для хранения сведений о пользователе или его предпочтений. Но знаете ли вы, что в каждом современном веб-браузере есть встроенная база данных?
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 для больших наборов структурированных данных, требующих запросов и фильтрации.