Kā izmantot IndexedDB kā datu bāzi

IndexedDB ir klienta puses NoSQL datu bāze, kas ļauj saglabāt un izgūt strukturētus datus lietotāja tīmekļa pārlūkprogrammā.

IndexedDB nodrošina vairākas priekšrocības, piemēram, lielāku atmiņu un bezsaistes datu glabāšanu un izguvi salīdzinājumā ar citām krātuves opcijām, piemēram, localStorage. Šeit jūs uzzināsit, kā izmantot IndexedDB kā datu bāzi.

Jūsu datu bāzes iestatīšana

Lai izveidotu datu bāzi, jums ir jāizveido atvērts pieprasījums, izmantojot IndexedDB atvērts metodi. The atvērts metode atgriež an IDBOpenDBRequest objektu. Šis objekts nodrošina piekļuvi panākumus, kļūda, un uzlabotsemitētie notikumi no atvērtās operācijas.

The atvērts metodei ir divi argumenti: nosaukums un izvēles versijas numurs. Nosaukuma arguments apzīmē jūsu datu bāzes nosaukumu. Versijas numurs norāda datu bāzes versiju, ar kuru jūsu lietojumprogramma plāno strādāt. Noklusējuma vērtība ir nulle.

Tālāk ir norādīts, kā izveidot atvērtu pieprasījumu.

konst openRequest = indexedDB.open("usersdb", 1);

Pēc atvērtā pieprasījuma izveidošanas jums ir jāuzklausa un risināt notikumus uz atdotā objekta.

The panākumus notikums notiek, kad veiksmīgi izveidojat datu bāzi. Pēc izsūtīšanas jūs piekļūstat savam datu bāzes objektam, izmantojot notikums.mērķis.rezultāts:

openRequest.onsuccess = funkciju (notikumu) {
konst db = notikums.mērķis.rezultāts;
konsole.log("Datu bāze izveidota", db);
};

Iepriekš minētais piemērs apstrādā veiksmīgu notikumu, reģistrējot datu bāzes objektu.

The kļūda notikums notiek, ja IndexedDB datu bāzes izveides laikā rodas problēma. To var apstrādāt, reģistrējot kļūdu konsolē vai izmantojot citu kļūdu apstrādes metodes:

openRequest.onror = funkciju (notikumu) {
// ...
};

The uzlabots notikums notiek, veidojot datubāzi pirmo reizi vai atjauninot tās versiju. Tas aizdegas tikai vienu reizi, padarot to par ideālu vietu priekšmetu veikala izveidei.

Objektu veikala izveide

Objektu veikals ir līdzīgs tabulai servera puses relāciju datu bāzēs. Varat izmantot objektu veikalu, lai saglabātu atslēgu un vērtību pārus.

Jums vajadzētu izveidot objektu veikalus, reaģējot uz uzlabots notikumu. Šis notikums tiek aktivizēts, kad izveidojat jaunu datu bāzes versiju vai jaunināt esošu versiju. Tas nodrošina, ka datubāze ir pareizi konfigurēta un atjaunināta pirms datu pievienošanas.

Varat izveidot objektu veikalu, izmantojot CreateObjectStore metodi, kurai varat piekļūt, izmantojot atsauci uz jūsu datubāzi. Šī metode izmanto objektu krātuves nosaukumu un konfigurācijas objektu kā argumentus.

Konfigurācijas objektā ir jādefinē primārā atslēga. Primāro atslēgu var definēt, definējot atslēgas ceļu, kas ir rekvizīts, kas vienmēr pastāv un satur unikālu vērtību. Varat arī izmantot atslēgu ģeneratoru, iestatot atslēgas ceļš īpašums uz "id” un autoIncrement īpašumu uz taisnība savā konfigurācijas objektā.

Piemēram:

openRequest.onupgradeneeded = funkciju (notikumu) {
konst db = notikums.mērķis.rezultāts;
// Izveidojiet objektu veikalu
konst userObjectStore = db.createObjectStore("lietotāju veikals", {
 KeyPath: "id",
 autoIncrement: taisnība,
 });
}

Šajā piemērā jūsu datu bāzē tiek izveidots objektu veikals ar nosaukumu “userStore” un tā primārā atslēga tiek iestatīta uz automātiski pieaugošu ID.

Indeksu noteikšana

IndexedDB indekss ir veids, kā efektīvāk organizēt un izgūt datus. Tas ļauj meklēt objektu veikalā un kārtot to, pamatojoties uz indeksētajiem rekvizītiem.

Lai objektu veikalā definētu indeksu, izmantojiet CreateIndex() objektu krātuves objekta metode. Šī metode izmanto indeksa nosaukumu, rekvizīta nosaukumu un konfigurācijas objektu kā argumentus:

userObjectStore.createIndex("vārds", "vārds", { unikāla: viltus });
userObjectStore.createIndex("e-pasts", "e-pasts", { unikāla: taisnība });

Šis koda bloks iepriekš definē divus indeksus, "nosaukums" un "e-pasts". userObjectStore. Indekss "nosaukums" nav unikāls, kas nozīmē, ka vairākiem objektiem var būt viena un tā pati nosaukuma vērtība, savukārt indekss "e-pasts" ir unikāls, nodrošinot, ka diviem objektiem nevar būt vienāda e-pasta vērtība.

Šeit ir pilns piemērs tam, kā jūs varat rīkoties ar uzlabots pasākums:

openRequest.onupgradeneeded = funkciju (notikumu) {
konst db = notikums.mērķis.rezultāts;
// Izveidojiet objektu veikalu
konst userObjectStore = db.createObjectStore("lietotāju veikals", {
 KeyPath: "id",
 autoIncrement: taisnība,
 }); 
// Izveidojiet indeksus
 userObjectStore.createIndex("vārds", "vārds", { unikāla: viltus });
 userObjectStore.createIndex("e-pasts", "e-pasts", { unikāla: taisnība });
};

Datu pievienošana IndexedDB

Darījums IndexedDB ir veids, kā grupēt vairākas lasīšanas un rakstīšanas darbības vienā operācijā. Lai nodrošinātu datu konsekvenci un integritāti, ja viena no operācijām darījumā neizdodas, IndexedDB atceļ visas darbības.

Lai pievienotu datus IndexedDB datu bāzei, objektu veikalā, kuram vēlaties pievienot datus, ir jāizveido transakcija un pēc tam jāizmanto pievienot () darījuma metodi, lai pievienotu datus.

Darījumu var izveidot, zvanot uz darījums metodi savā datu bāzes objektā. Šai metodei ir divi argumenti: jūsu datu krātuves nosaukums (-i) un darījuma veids, kas var būt tikai lasīt (noklusējums) vai Lasīt rakstīt.

Pēc tam zvaniet uz objectStore() darījuma metodi un nosūtiet tā objektu veikala nosaukumu, kuram vēlaties pievienot datus. Šī metode atgriež atsauci uz objektu krātuvi.

Visbeidzot zvaniet uz pievienot () metodi objektu krātuvē un nododiet datus, ko vēlaties pievienot:

konst addUserData = (userData, db) => {
// Atveriet darījumu
konst darījums = db.transaction("lietotāju veikals", "Lasīt rakstīt");
// Pievienojiet datus objektu krātuvei
konst userObjectStore = transakcija.objectStore("lietotāju veikals");
// Pieprasiet pievienot userData
konst pieprasījums = userObjectStore.add (lietotāja dati);
// Apstrādājiet veiksmīgu notikumu
 pieprasījums.onsuccess = funkciju (notikumu) {
//...
 };
// Apstrādājiet kļūdu
 pieprasījums.kļūda = funkciju (notikumu) {
//...
 };
};

Šī funkcija izveido transakciju ar objektu veikalu "userStore" un iestata režīmu uz "lasīt rakstīt". Pēc tam tas iegūst objektu veikalu un pievieno userData uz to, izmantojot pievienot metodi.

Datu izguve no IndexedDB

Lai izgūtu datus no IndexedDB datu bāzes, ir jāizveido transakcija objektu krātuvē, no kura vēlaties izgūt datus, un pēc tam izmantojiet gūt() vai iegūt visu () darījuma metode datu izgūšanai atkarībā no izgūstamo datu apjoma.

The gūt() metode ņem vērtību tā objekta primārajai atslēgai, kuru vēlaties izgūt, un atgriež objektu ar atbilstošo atslēgu no jūsu objektu krātuves.

The iegūt visu () metode atgriež visus objektu veikalā esošos datus. Tas arī izmanto neobligātu ierobežojumu kā argumentu un atgriež visus atbilstošos datus no veikala.

konst getUserData = (id, db) => {
konst darījums = db.transaction("lietotāju veikals", "tikai lasīt");
konst userObjectStore = transakcija.objectStore("lietotāju veikals");
// Pieprasiet iegūt datus
konst pieprasījums = userObjectStore.get (id);
 pieprasījums.onsuccess = funkciju (notikumu) {
konsole.log (request.result);
 };
 pieprasījums.kļūda = funkciju (notikumu) {
// Roktura kļūda
 };
};

Šī funkcija izveido transakciju ar objektu veikalu "userStore" un iestata režīmu "tikai lasāms". Pēc tam tas izgūst lietotāja datus ar atbilstošu ID no objektu krātuves.

Datu atjaunināšana, izmantojot IndexedDB

Lai atjauninātu datus IndexedDB, jums ir jāizveido transakcija ar "lasīšanas un rakstīšanas" režīmu. Turpiniet, izgūstot objektu, kuru vēlaties atjaunināt, izmantojot gūt() metodi. Pēc tam modificējiet objektu un izsauciet likt () metodi objektu veikalā, lai saglabātu atjaunināto objektu atpakaļ datu bāzē.

konst updateUserData = (id, userData, db) => {
konst darījums = db.transaction("lietotāju veikals", "Lasīt rakstīt");
konst userObjectStore = transakcija.objectStore("lietotāju veikals");
// Pieprasiet iegūt datus
konst getRequest = userObjectStore.get (id);
// Apstrādājiet veiksmīgu notikumu
 getRequest.onsuccess = funkciju (notikumu) {
// Iegūstiet vecos lietotāja datus
konst lietotājs = notikums.mērķis.rezultāts;
// Atjauniniet lietotāja datus
 user.name = userData.name;
 user.email = userData.email;
// Pieprasiet datu atjaunināšanu
konst putRequest = userObjectStore.put (lietotājs);
 putRequest.onsuccess = funkciju (notikumu) {
// Rīkojieties ar panākumiem
 };
 putRequest.onror = funkciju (notikumu) {
// Roktura kļūda
 };
 };
 getRequest.onror = funkciju (notikumu) {
// Roktura kļūda
 };
};

Šī funkcija izveido darījumu, lai iegūtu un atjauninātu jūsu datu bāzes datus.

Datu dzēšana no IndexedDB

Lai izdzēstu datus no IndexedDB, jums ir jāizveido transakcija ar "lasīšanas rakstīšanas" režīmu. Pēc tam zvaniet uz dzēst() metode objektu veikalā, lai noņemtu objektu no datu bāzes:

konst deleteUserData = (id, db) => {
konst darījums = db.transaction("lietotāju veikals", "Lasīt rakstīt");
konst userObjectStore = transakcija.objectStore("lietotāju veikals");
// Pieprasīt datu dzēšanu
konst pieprasījums = userObjectStore.delete (id);
 pieprasījums.onsuccess = funkciju (notikumu) {
// Rīkojieties ar panākumiem
 };
 pieprasījums.kļūda = funkciju (notikumu) {
// Roktura kļūda
 };
};

Šī funkcija izveido transakciju, kas dzēš datus ar atbilstošo ID no jūsu objektu krātuves.

Vai jums vajadzētu izmantot IndexedDB vai localStorage?

Izvēle starp IndexedDB un citām klienta puses datu bāzēm, piemēram, localStorage, ir atkarīga no jūsu lietojumprogrammas prasībām. Izmantojiet lokālo krātuvi, lai vienkārši uzglabātu nelielu datu apjomu. Izvēlieties IndexedDB lielām strukturētu datu kopām, kurām nepieciešama vaicāšana un filtrēšana.