Številne spletne aplikacije potrebujejo bazo podatkov za shranjevanje uporabniških podatkov ali nastavitev. Toda ali ste vedeli, da je v vsakem sodobnem spletnem brskalniku vgrajena zbirka podatkov?

IndexedDB je baza podatkov NoSQL na strani odjemalca, ki vam omogoča shranjevanje in pridobivanje strukturiranih podatkov v uporabnikovem spletnem brskalniku.

IndexedDB ponuja številne prednosti, kot je večji pomnilnik in shranjevanje in pridobivanje podatkov brez povezave v primerjavi z drugimi možnostmi shranjevanja, kot je localStorage. Tukaj se boste naučili uporabljati IndexedDB kot bazo podatkov.

Nastavitev vaše zbirke podatkov

Če želite ustvariti bazo podatkov, morate ustvariti odprto zahtevo z uporabo IndexedDB odprto metoda. The odprto metoda vrne an IDBOpenDBRequest predmet. Ta objekt omogoča dostop do uspeh, napaka, in nadgrajenooddanih dogodkov iz odprte operacije.

The odprto metoda ima dva argumenta: ime in neobvezno številko različice. Argument imena predstavlja ime vaše baze podatkov. Številka različice določa različico baze podatkov, s katero vaša aplikacija pričakuje, da bo delovala. Privzeta vrednost je nič.

instagram viewer

Odprto zahtevo ustvarite tako:

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

Ko ustvarite odprto zahtevo, morate poslušati in obvladati dogodke na vrnjenem predmetu.

The uspeh zgodi, ko uspešno ustvarite bazo podatkov. Ko je oddan, dobite dostop do svojega objekta baze podatkov event.target.result:

openRequest.onsuccess = funkcijo (dogodek) {
konst db = event.target.result;
konzola.log("Baza podatkov ustvarjena", db);
};

Zgornji primer obravnava dogodek uspeha z beleženjem objekta baze podatkov.

The napaka se zgodi, če IndexedDB med ustvarjanjem baze podatkov naleti na težavo. To lahko odpravite tako, da napako zabeležite v konzolo ali uporabite drugo metode za odpravo napak:

openRequest.onerror = funkcijo (dogodek) {
// ...
};

The nadgrajeno se zgodi, ko bazo podatkov ustvarite prvič ali ko posodobite njeno različico. Sproži se samo enkrat, zaradi česar je idealen kraj za ustvarjanje shrambe predmetov.

Ustvarjanje shrambe predmetov

Shramba objektov je podobna tabeli v strežniških relacijskih bazah podatkov. Shrambo objektov lahko uporabite za shranjevanje parov ključ-vrednost.

Ustvariti morate shrambe objektov kot odgovor na nadgrajeno dogodek. Ta dogodek se sproži, ko ustvarite novo različico baze podatkov ali nadgradite obstoječo različico. To zagotavlja, da je baza podatkov pravilno konfigurirana in posodobljena, preden dodate kakršne koli podatke.

Shrambo predmetov lahko ustvarite z uporabo createObjectStore metoda, do katere lahko dostopate na sklicu vaše baze podatkov. Ta metoda vzame ime shrambe objektov in konfiguracijski objekt kot argumenta.

V konfiguracijskem objektu morate definirati primarni ključ. Primarni ključ lahko definirate tako, da definirate pot ključa, ki je lastnost, ki vedno obstaja in vsebuje edinstveno vrednost. Druga možnost je, da uporabite generator ključev, tako da nastavite keyPath lastnina za “id" in autoIncrement premoženje do prav v vašem konfiguracijskem objektu.

Na primer:

openRequest.onupgradeneeded = funkcijo (dogodek) {
konst db = event.target.result;
// Ustvari shrambo objektov
konst userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 autoincrement: prav,
 });
}

Ta primer ustvari shrambo objektov z imenom »userStore« v vaši bazi podatkov in nastavi njen primarni ključ na samodejni inkrementalni ID.

Definiranje indeksov

V IndexedDB je indeks način za bolj učinkovito organiziranje in pridobivanje podatkov. To vam omogoča iskanje po shrambi objektov in razvrščanje na podlagi indeksiranih lastnosti.

Če želite definirati indeks v shrambi objektov, uporabite createIndex() metoda objektnega shranjevalnega objekta. Ta metoda vzame ime indeksa, ime lastnosti in konfiguracijski objekt kot argumente:

userObjectStore.createIndex("ime", "ime", { edinstveno: lažno });
userObjectStore.createIndex("E-naslov", "E-naslov", { edinstveno: prav });

Ta zgornji blok kode definira dva indeksa, "ime" in "e-pošta" na userObjectStore. Indeks »ime« ni unikaten, kar pomeni, da ima lahko več predmetov enako vrednost imena, medtem ko je indeks »e-pošta« unikaten, kar zagotavlja, da dva predmeta ne moreta imeti enake vrednosti e-pošte.

Tukaj je popoln primer, kako lahko ravnate z nadgrajeno dogodek:

openRequest.onupgradeneeded = funkcijo (dogodek) {
konst db = event.target.result;
// Ustvari shrambo objektov
konst userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 autoincrement: prav,
 }); 
// Ustvari indekse
 userObjectStore.createIndex("ime", "ime", { edinstveno: lažno });
 userObjectStore.createIndex("E-naslov", "E-naslov", { edinstveno: prav });
};

Dodajanje podatkov v IndexedDB

Transakcija v IndexedDB je način za združevanje več operacij branja in pisanja v eno operacijo. Če ena od operacij znotraj transakcije ne uspe, IndexedDB povrne vse operacije nazaj, da zagotovi doslednost in celovitost podatkov.

Če želite dodati podatke v bazo podatkov IndexedDB, morate ustvariti transakcijo v shrambi objektov, v katero želite dodati podatke, in nato uporabiti dodaj() metodo transakcije za dodajanje podatkov.

Transakcijo lahko ustvarite tako, da pokličete transakcija na vašem objektu baze podatkov. Ta metoda ima dva argumenta: ime (-a) vaše podatkovne shrambe in način transakcije, ki je lahko le za branje (privzeto) oz brati, pisati.

Nato pokličite objectStore() metodo na transakciji in posredujte ime shrambe objektov, v katero želite dodati podatke. Ta metoda vrne sklic na shrambo objektov.

Končno pokličite dodaj() metodo v shrambi objektov in posredujte podatke, ki jih želite dodati:

konst addUserData = (uporabniški podatki, db) => {
// Odprite transakcijo
konst transakcija = db.transakcija("userStore", "brati, pisati");
// Dodajanje podatkov v shrambo objektov
konst userObjectStore = transaction.objectStore("userStore");


// Izdelajte zahtevo za dodajanje uporabniških podatkov
konst zahteva = userObjectStore.add (userData);


// Obravnava uspeha
 request.onsuccess = funkcijo (dogodek) {
//...
 };
// Obravnava napake
 request.onerror = funkcijo (dogodek) {
//...
 };
};

Ta funkcija ustvari transakcijo s shrambo objektov "userStore" in nastavi način na "readwrite". Nato pridobi shrambo predmetov in doda uporabniški podatki do njega z uporabo dodati metoda.

Pridobivanje podatkov iz IndexedDB

Če želite pridobiti podatke iz baze podatkov IndexedDB, morate ustvariti transakcijo v shrambi objektov, iz katere želite pridobiti podatke, in nato uporabiti dobiti () oz getAll() metodo transakcije za pridobivanje podatkov glede na količino podatkov, ki jih želite pridobiti.

The dobiti () metoda vzame vrednost za primarni ključ predmeta, ki ga želite pridobiti, in vrne objekt z ustreznim ključem iz vaše shrambe objektov.

The getAll() metoda vrne vse podatke v shrambi objektov. Prav tako vzame neobvezno omejitev kot argument in vrne vse ujemajoče se podatke iz shrambe.

konst getUserData = (id, db) => {
konst transakcija = db.transakcija("userStore", "le za branje");
konst userObjectStore = transaction.objectStore("userStore");
// Vložite zahtevo za pridobitev podatkov
konst zahteva = userObjectStore.get (id);


 request.onsuccess = funkcijo (dogodek) {
konzola.log (request.result);
 };
 request.onerror = funkcijo (dogodek) {
// Obravnava napake
 };
};

Ta funkcija ustvari transakcijo s shrambo objektov "userStore" in nastavi način na "samo za branje". Nato iz shrambe objektov pridobi uporabniške podatke z ustreznim ID-jem.

Posodabljanje podatkov z IndexedDB

Če želite posodobiti podatke v IndexedDB, morate ustvariti transakcijo z načinom »branje in pisanje«. Nadaljujte s pridobivanjem predmeta, ki ga želite posodobiti, z uporabo dobiti () metoda. Nato spremenite predmet in pokličite daj() v shrambi objektov, da posodobljeni objekt shranite nazaj v bazo podatkov.

konst updateUserData = (id, uporabniški podatki, db) => {
konst transakcija = db.transakcija("userStore", "brati, pisati");
konst userObjectStore = transaction.objectStore("userStore");
// Vložite zahtevo za pridobitev podatkov
konst getRequest = userObjectStore.get (id);


// Obravnava uspeha
 getRequest.onsuccess = funkcijo (dogodek) {
// Pridobite stare uporabniške podatke
konst uporabnik = event.target.result;


// Posodobi uporabniške podatke
 user.name = userData.name;
 uporabnik.e-pošta = uporabniški podatki.e-pošta;


// Vloži zahtevo za posodobitev podatkov
konst putRequest = userObjectStore.put (uporabnik);


 putRequest.onsuccess = funkcijo (dogodek) {
// Obravnava uspeha
 };


 putRequest.onerror = funkcijo (dogodek) {
// Obravnava napake
 };
 };
 getRequest.onerror = funkcijo (dogodek) {
// Obravnava napake
 };
};

Ta funkcija ustvari transakcijo za pridobitev in posodobitev podatkov vaše zbirke podatkov.

Brisanje podatkov iz IndexedDB

Če želite izbrisati podatke iz IndexedDB, morate ustvariti transakcijo z načinom "branje in pisanje". Potem pokličite izbrisati() metoda v shrambi objektov za odstranitev predmeta iz baze podatkov:

konst deleteUserData = (id, db) => {
konst transakcija = db.transakcija("userStore", "brati, pisati");
konst userObjectStore = transaction.objectStore("userStore");
// Zahtevajte izbris podatkov
konst zahteva = userObjectStore.delete (id);


 request.onsuccess = funkcijo (dogodek) {
// Obravnava uspeha
 };
 request.onerror = funkcijo (dogodek) {
// Obravnava napake
 };
};

Ta funkcija ustvari transakcijo, ki izbriše podatke z ustreznim ID-jem iz vaše shrambe objektov.

Bi morali uporabljati IndexedDB ali localStorage?

Izbira med IndexedDB in drugimi zbirkami podatkov na strani odjemalca, kot je localStorage, je odvisna od zahtev vaše aplikacije. Uporabite localStorage za preprosto shranjevanje majhnih količin podatkov. Izberite IndexedDB za velike nabore strukturiranih podatkov, ki zahtevajo poizvedovanje in filtriranje.