Как да използвате IndexedDB като база данни

IndexedDB е NoSQL база данни от страна на клиента, която ви позволява да съхранявате и извличате структурирани данни в уеб браузъра на потребителя.

IndexedDB предоставя няколко предимства, като по-голяма памет и офлайн съхранение и извличане на данни в сравнение с други опции за съхранение, като localStorage. Тук ще научите как да използвате IndexedDB като база данни.

Настройване на вашата база данни

За да създадете базата данни, трябва да създадете отворена заявка с помощта на IndexedDB отворен метод. The отворен метод връща an IDBOpenDBRequest обект. Този обект осигурява достъп до успех, грешка, и необходимо е надграденоизлъчени събития от отворената операция.

The отворен методът приема два аргумента: име и незадължителен номер на версията. Аргументът име представлява името на вашата база данни. Номерът на версията указва версията на базата данни, с която вашето приложение очаква да работи. Стойността по подразбиране е нула.

Ето как да създадете отворена заявка:

конст openRequest = indexedDB.open("usersdb", 1);

След като създадете отворената заявка, трябва да слушате и управлявайте събитията върху върнатия обект.

The успех събитие възниква, когато създадете базата данни успешно. Веднъж излъчен, вие получавате достъп до вашия обект на база данни чрез event.target.result:

openRequest.onsuccess = функция (събитие) {
конст db = event.target.result;
конзола.log(„Създадена база данни“, db);
};

Примерът по-горе обработва успешно събитие чрез регистриране на обекта на базата данни.

The грешка събитие възниква, ако IndexedDB срещне проблем при създаването на базата данни. Можете да се справите с това, като регистрирате грешката в конзолата или използвате друг методи за обработка на грешки:

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

The необходимо е надградено събитие възниква, когато създавате базата данни за първи път или когато актуализирате нейната версия. Задейства се само веднъж, което го прави идеалното място за създаване на магазин за обекти.

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

Хранилището на обекти е подобно на таблица в сървърни релационни бази данни. Можете да използвате хранилище на обекти, за да съхранявате двойки ключ-стойност.

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

Можете да създадете хранилище на обекти, като използвате createObjectStore метод, до който можете да получите достъп чрез препратка към вашата база данни. Този метод приема името на хранилището на обекти и конфигурационен обект като аргументи.

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

Например:

openRequest.onupgradeneeded = функция (събитие) {
конст db = event.target.result;
// Създаване на хранилище на обекти
конст userObjectStore = db.createObjectStore("userStore", {
 keyPath: "документ за самоличност",
 автоматично увеличаване: вярно,
 });
}

Този пример създава хранилище на обекти с име „userStore“ във вашата база данни и задава неговия първичен ключ на автоматично нарастващ идентификатор.

Дефиниране на индекси

В IndexedDB индексът е начин за по-ефективно организиране и извличане на данни. Това ви позволява да търсите в хранилището на обекти и да го сортирате въз основа на индексираните свойства.

За да дефинирате индекс в хранилище на обекти, използвайте createIndex() метод на обект обект за съхранение. Този метод приема име на индекс, име на свойство и конфигурационен обект като аргументи:

userObjectStore.createIndex("име", "име", { единствен по рода си: невярно });
userObjectStore.createIndex("електронна поща", "електронна поща", { единствен по рода си: вярно });

Този кодов блок по-горе дефинира два индекса, "име" и "имейл" на userObjectStore. Индексът „име“ е неуникален, което означава, че множество обекти могат да имат една и съща стойност на име, докато индексът „имейл“ е уникален, което гарантира, че няма два обекта да имат еднаква имейл стойност.

Ето пълен пример за това как можете да се справите с необходимо е надградено събитие:

openRequest.onupgradeneeded = функция (събитие) {
конст db = event.target.result;
// Създаване на хранилище на обекти
конст userObjectStore = db.createObjectStore("userStore", {
 keyPath: "документ за самоличност",
 автоматично увеличаване: вярно,
 }); 
// Създаване на индекси
 userObjectStore.createIndex("име", "име", { единствен по рода си: невярно });
 userObjectStore.createIndex("електронна поща", "електронна поща", { единствен по рода си: вярно });
};

Добавяне на данни към IndexedDB

Транзакцията в IndexedDB е начин за групиране на множество операции за четене и запис в една операция. За да осигури съгласуваност и цялост на данните, ако една от операциите в рамките на транзакция е неуспешна, IndexedDB връща обратно всички операции.

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

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

След това се обадете на objectStore() метод на транзакцията и предайте името на хранилището на обекти, към което искате да добавите данни. Този метод връща препратка към хранилището на обекти.

Накрая се обадете на добави () метод в хранилището на обекти и предайте данните, които искате да добавите:

конст addUserData = (потребителски данни, db) => {
// Отваряне на транзакция
конст транзакция = db.transaction("userStore", "чети пиши");
// Добавяне на данни към хранилището на обекти
конст userObjectStore = transaction.objectStore("userStore");
// Направете заявка за добавяне на userData
конст заявка = userObjectStore.add (userData);
// Обработване на успешно събитие
 request.onsuccess = функция (събитие) {
//...
 };
// Обработване на грешка
 request.onerror = функция (събитие) {
//...
 };
};

Тази функция създава транзакция с хранилището на обекти "userStore" и задава режима на "readwrite". След това получава хранилището на обекти и добавя потребителски данни към него с помощта на добавете метод.

Извличане на данни от IndexedDB

За да извлечете данни от база данни IndexedDB, трябва да създадете транзакция в хранилището на обекти, от което искате да извлечете данните, и след това да използвате получи() или Вземи всичко() метод на транзакцията за извличане на данните в зависимост от количеството данни, които искате да извлечете.

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

The Вземи всичко() метод връща всички данни в обектно хранилище. Той също така приема незадължително ограничение като аргумент и връща всички съответстващи данни от хранилището.

конст getUserData = (id, db) => {
конст транзакция = db.transaction("userStore", "Само за четене");
конст userObjectStore = transaction.objectStore("userStore");
// Направете заявка за получаване на данните
конст заявка = userObjectStore.get (id);
 request.onsuccess = функция (събитие) {
конзола.log (request.result);
 };
 request.onerror = функция (събитие) {
// Обработване на грешка
 };
};

Тази функция създава транзакция с хранилището на обекти "userStore" и задава режима на "само за четене". След това извлича потребителски данни със съвпадащия идентификатор от хранилището на обекти.

Актуализиране на данни с IndexedDB

За да актуализирате данни в IndexedDB, трябва да създадете транзакция с режим "readwrite". Продължете, като извлечете обекта, който искате да актуализирате, като използвате получи() метод. След това променете обекта и извикайте слагам() метод в хранилището на обекти, за да запишете актуализирания обект обратно в базата данни.

конст updateUserData = (id, userData, db) => {
конст транзакция = db.transaction("userStore", "чети пиши");
конст userObjectStore = transaction.objectStore("userStore");
// Направете заявка за получаване на данните
конст getRequest = userObjectStore.get (id);
// Обработване на успешно събитие
 getRequest.onsuccess = функция (събитие) {
// Вземете старите потребителски данни
конст потребител = event.target.result;
// Актуализиране на потребителските данни
 user.name = userData.name;
 user.email = userData.email;
// Направете заявка за актуализиране на данните
конст putRequest = userObjectStore.put (потребител);
 putRequest.onsuccess = функция (събитие) {
// Справяне с успеха
 };
 putRequest.onerror = функция (събитие) {
// Обработване на грешка
 };
 };
 getRequest.onerror = функция (събитие) {
// Обработване на грешка
 };
};

Тази функция създава транзакция за получаване и актуализиране на данните от вашата база данни.

Изтриване на данни от IndexedDB

За да изтриете данни от IndexedDB, трябва да създадете транзакция с режим "readwrite". След това се обадете на Изтрий() метод в хранилището на обекти за премахване на обекта от базата данни:

конст deleteUserData = (id, db) => {
конст транзакция = db.transaction("userStore", "чети пиши");
конст userObjectStore = transaction.objectStore("userStore");
// Направете заявка за изтриване на данните
конст заявка = userObjectStore.delete (id);
 request.onsuccess = функция (събитие) {
// Справяне с успеха
 };
 request.onerror = функция (събитие) {
// Обработване на грешка
 };
};

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

Трябва ли да използвате IndexedDB или localStorage?

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