Kuidas kasutada IndexedDB-d andmebaasina

IndexedDB on kliendipoolne NoSQL-i andmebaas, mis võimaldab salvestada ja hankida struktureeritud andmeid kasutaja veebibrauseris.

IndexedDB pakub mitmeid eeliseid, nagu suurem mälu ja võrguühenduseta andmete salvestamine ja väljavõtt võrreldes muude salvestusvõimalustega, nagu kohalik salvestus. Siit saate teada, kuidas kasutada IndexedDB-d andmebaasina.

Andmebaasi seadistamine

Andmebaasi loomiseks peate IndexedDB abil looma avatud päringu avatud meetod. The avatud meetod tagastab an IDBOpenDBRequest objektiks. See objekt võimaldab juurdepääsu edu, vigaja uuendatudväljastatud sündmused avatud operatsioonist.

The avatud meetodil on kaks argumenti: nimi ja valikuline versiooninumber. Nimeargument tähistab teie andmebaasi nime. Versiooninumber määrab andmebaasi versiooni, millega teie rakendus loodab töötada. Vaikeväärtus on null.

Avatud päringu loomiseks tehke järgmist.

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

Pärast avatud päringu loomist peate kuulama ja sündmustega tegelema tagastatud objektil.

The edu sündmus toimub siis, kui loote andmebaasi edukalt. Pärast väljastamist saate juurdepääsu oma andmebaasiobjektile läbi sündmus.siht.tulemus:

openRequest.onsuccess = funktsiooni (sündmus) {
konst db = event.target.result;
konsool.log("Andmebaas loodud", db);
};

Ülaltoodud näide käsitleb edusündmust andmebaasiobjekti logimisega.

The viga sündmus ilmneb, kui IndexedDB-l tekib andmebaasi loomisel probleem. Saate sellega toime tulla, logides vea konsooli või kasutades muud vigade käsitlemise meetodid:

openRequest.onror = funktsiooni (sündmus) {
// ...
};

The uuendatud sündmus toimub siis, kui loote andmebaasi esimest korda või värskendate selle versiooni. See süttib ainult üks kord, mistõttu on see ideaalne koht esemepoe loomiseks.

Objektipoe loomine

Objektipood sarnaneb serveripoolsete relatsiooniandmebaaside tabeliga. Võtme-väärtuste paaride salvestamiseks saate kasutada objektihoidlat.

Peaksite looma objektipoed vastuseks sellele uuendatud sündmus. See sündmus käivitub, kui loote andmebaasist uue versiooni või täiendate olemasolevat versiooni. See tagab, et andmebaas on enne andmete lisamist õigesti konfigureeritud ja ajakohane.

Saate luua objektide poe kasutades luuaObjectStore meetod, millele pääsete juurde oma andmebaasi viite kaudu. See meetod võtab argumentidena objektipoe nime ja konfiguratsiooniobjekti.

Konfiguratsiooniobjektis peate määratlema primaarvõtme. Saate määratleda primaarvõtme, määrates võtmetee, mis on atribuut, mis on alati olemas ja sisaldab kordumatut väärtust. Teise võimalusena võite kasutada võtmegeneraatorit, seadistades võtmetee vara "id" ja automaatne suurendamine vara juurde tõsi teie konfiguratsiooniobjektis.

Näiteks:

openRequest.onupgradeneeded = funktsiooni (sündmus) {
konst db = event.target.result;
// Objektihoidla loomine
konst userObjectStore = db.createObjectStore("kasutajapood", {
 võtmetee: "id",
 autoIncrement: tõsi,
 });
}

See näide loob teie andmebaasis objektipoe nimega "userStore" ja määrab selle primaarvõtme automaatselt suureneva ID-ga.

Indeksite määratlemine

IndexedDB-s on indeks viis andmete tõhusamaks korraldamiseks ja toomiseks. See võimaldab otsida objektipoest ja sortida seda indekseeritud omaduste alusel.

Objektipoe indeksi määratlemiseks kasutage createIndex() objektide salvestamise objekti meetod. See meetod võtab argumentidena indeksi nime, atribuudi nime ja konfiguratsiooniobjekti:

userObjectStore.createIndex("nimi", "nimi", { ainulaadne: vale });
userObjectStore.createIndex("e-post", "e-post", { ainulaadne: tõsi });

See ülaltoodud koodiplokk määratleb kaks indeksit, "nimi" ja "e-post". userObjectStore. Indeks "nimi" ei ole unikaalne, mis tähendab, et mitmel objektil võib olla sama nimeväärtus, samas kui "e-posti" indeks on kordumatu, tagades, et kahel objektil ei saa olla sama e-posti väärtus.

Siin on täielik näide selle kohta, kuidas saate hakkama uuendatud sündmus:

openRequest.onupgradeneeded = funktsiooni (sündmus) {
konst db = event.target.result;
// Objektihoidla loomine
konst userObjectStore = db.createObjectStore("kasutajapood", {
 võtmetee: "id",
 autoIncrement: tõsi,
 }); 
// Indekside loomine
 userObjectStore.createIndex("nimi", "nimi", { ainulaadne: vale });
 userObjectStore.createIndex("e-post", "e-post", { ainulaadne: tõsi });
};

Andmete lisamine IndexedDB-sse

Tehing IndexedDB-s on viis, kuidas rühmitada mitu lugemis- ja kirjutamistoimingut üheks toiminguks. Andmete järjepidevuse ja terviklikkuse tagamiseks tühistab IndexedDB kõik toimingud, kui üks tehingu toimingutest ebaõnnestub.

Andmete lisamiseks IndexedDB andmebaasi peate looma tehingu objektihoidlas, kuhu soovite andmed lisada, ja seejärel kasutama lisama() tehingu meetodil andmete lisamiseks.

Tehingu saate teha helistades tehing meetodit oma andmebaasiobjektil. Sellel meetodil on kaks argumenti: teie andmesalve nimi (nimed) ja tehingu režiim, mis võib olla Loe ainult (vaikimisi) või lugema kirjutama.

Seejärel helistage objektipood() meetodil ja edastage selle objektipoe nimi, kuhu soovite andmeid lisada. See meetod tagastab viite objektisalvele.

Lõpuks helistage lisama() meetod objektisalves ja edastage andmed, mida soovite lisada:

konst addUserData = (userData, db) => {
// Tehingu avamine
konst tehingu = db.transaction("kasutajapood", "lugema kirjutama");
// Andmete lisamine objektisalve
konst userObjectStore = tehingu.objectStore("kasutajapood");
// Esitage taotlus kasutajaandmete lisamiseks
konst taotlus = userObjectStore.add (kasutajaandmed);
// Juhtige edusündmust
 taotlus.onsuccess = funktsiooni (sündmus) {
//...
 };
// Käsitlege viga
 request.error = funktsiooni (sündmus) {
//...
 };
};

See funktsioon loob tehingu objektisalvega "userStore" ja seab režiimiks "readwrite". Seejärel hangib see objektide poe ja lisab selle kasutaja andmed sellele kasutades lisama meetod.

Andmete hankimine IndexedDB-st

Andmete toomiseks IndexedDB andmebaasist peate looma tehingu objektihoidlas, kust soovite andmeid hankida, ja seejärel kasutama saada () või hanki kõik() tehingu meetodil andmete toomiseks olenevalt andmete hulgast, mida soovite tuua.

The saada () meetod võtab allalaaditava objekti primaarvõtme väärtuse ja tagastab objekti koos vastava võtmega teie objektipoest.

The hanki kõik() meetod tagastab kõik objektihoidlas olevad andmed. Samuti võtab see argumendina valikulise piirangu ja tagastab kõik poest sobivad andmed.

konst getUserData = (id, db) => {
konst tehingu = db.transaction("kasutajapood", "Loe ainult");
konst userObjectStore = tehingu.objectStore("kasutajapood");
// Esitage taotlus andmete saamiseks
konst taotlus = userObjectStore.get (id);
 taotlus.onsuccess = funktsiooni (sündmus) {
konsool.log (request.result);
 };
 request.error = funktsiooni (sündmus) {
// Käsitsemisviga
 };
};

See funktsioon loob tehingu objektipoega "userStore" ja seab režiimiks "kirjutuskaitstud". Seejärel hangib see objektipoest kasutajaandmed vastava ID-ga.

Andmete värskendamine IndexedDB-ga

Andmete värskendamiseks IndexedDB-s peate looma tehingu režiimis "Readwrite". Jätkake värskendatava objekti hankimisega, kasutades nuppu saada () meetod. Seejärel muutke objekti ja helistage pane() meetod objektipoes, et salvestada värskendatud objekt tagasi andmebaasi.

konst updateUserData = (id, userData, db) => {
konst tehingu = db.transaction("kasutajapood", "lugema kirjutama");
konst userObjectStore = tehingu.objectStore("kasutajapood");
// Esitage taotlus andmete saamiseks
konst getRequest = userObjectStore.get (id);
// Juhtige edusündmust
 getRequest.onsuccess = funktsiooni (sündmus) {
// Hankige vanad kasutajaandmed
konst kasutaja = event.target.result;
// Uuenda kasutajaandmeid
 kasutaja.nimi = kasutajaandmed.nimi;
 user.email = userData.email;
// Esitage taotlus andmete uuendamiseks
konst putRequest = userObjectStore.put (kasutaja);
 putRequest.onsuccess = funktsiooni (sündmus) {
// Käsitsege edu
 };
 putRequest.onror = funktsiooni (sündmus) {
// Käsitsemisviga
 };
 };
 getRequest.onror = funktsiooni (sündmus) {
// Käsitsemisviga
 };
};

See funktsioon loob tehingu teie andmebaasi andmete hankimiseks ja värskendamiseks.

Andmete kustutamine IndexedDB-st

Andmete kustutamiseks IndexedDB-st peate looma tehingu režiimis "Readwrite". Seejärel helistage kustuta() meetod objektipoes objekti andmebaasist eemaldamiseks:

konst deleteUserData = (id, db) => {
konst tehingu = db.transaction("kasutajapood", "lugema kirjutama");
konst userObjectStore = tehingu.objectStore("kasutajapood");
// Esitage taotlus andmete kustutamiseks
konst taotlus = userObjectStore.delete (id);
 taotlus.onsuccess = funktsiooni (sündmus) {
// Käsitsege edu
 };
 request.error = funktsiooni (sündmus) {
// Käsitsemisviga
 };
};

See funktsioon loob tehingu, mis kustutab teie objektipoest vastava ID-ga andmed.

Kas peaksite kasutama IndexedDB või localStorage'i?

Valik IndexedDB ja muude kliendipoolsete andmebaaside (nt localStorage) vahel sõltub teie rakenduse nõuetest. Kasutage kohalikku salvestusruumi väikeste andmemahtude lihtsaks salvestamiseks. Valige IndexedDB suurte struktureeritud andmekogumite jaoks, mis nõuavad päringuid ja filtreerimist.