Kako koristiti IndexedDB kao bazu podataka

IndexedDB je NoSQL baza podataka na strani klijenta koja vam omogućuje pohranjivanje i dohvaćanje strukturiranih podataka unutar web-preglednika korisnika.

IndexedDB pruža nekoliko prednosti, poput veće memorije i izvanmrežne pohrane i dohvaćanja podataka u odnosu na druge opcije pohrane, kao što je localStorage. Ovdje ćete naučiti kako koristiti IndexedDB kao bazu podataka.

Postavljanje vaše baze podataka

Da biste stvorili bazu podataka, morate stvoriti otvoreni zahtjev pomoću IndexedDB-a otvoren metoda. The otvoren metoda vraća an IDBOpenDBRequest objekt. Ovaj objekt omogućuje pristup do uspjeh, greška, i nadograđenoemitirani događaji iz otvorene operacije.

The otvoren metoda uzima dva argumenta: naziv i izborni broj verzije. Argument imena predstavlja naziv vaše baze podataka. Broj verzije navodi verziju baze podataka s kojom vaša aplikacija očekuje da radi. Zadana vrijednost je nula.

Evo kako izraditi otvoreni zahtjev:

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

Nakon kreiranja otvorenog zahtjeva, morate slušati i rukovati događajima na vraćeni predmet.

The uspjeh događaj se događa kada uspješno kreirate bazu podataka. Nakon emitiranja, dobivate pristup svom objektu baze podataka događaj.cilj.rezultat:

openRequest.onsuccess = funkcija (događaj) {
konst db = event.target.result;
konzola.log("Baza podataka stvorena", db);
};

Gornji primjer obrađuje događaj uspjeha bilježenjem objekta baze podataka.

The greška događaj se događa ako IndexedDB naiđe na problem tijekom izrade baze podataka. To možete riješiti tako da zabilježite pogrešku na konzolu ili koristite neki drugi način metode rješavanja grešaka:

openRequest.onerror = funkcija (događaj) {
// ...
};

The nadograđeno događaj se događa kada prvi put kreirate bazu podataka ili kada ažurirate njezinu verziju. Pali samo jednom, što ga čini idealnim mjestom za stvaranje spremišta predmeta.

Stvaranje spremišta objekata

Spremište objekata slično je tablici u relacijskim bazama podataka na strani poslužitelja. Možete koristiti pohranu objekata za pohranu parova ključ-vrijednost.

Trebali biste stvoriti spremišta objekata kao odgovor na nadograđeno događaj. Ovaj se događaj aktivira kada stvorite novu verziju baze podataka ili nadogradite postojeću verziju. Ovo osigurava da je baza podataka ispravno konfigurirana i ažurna prije nego što dodate podatke.

Možete stvoriti pohranu objekata pomoću createObjectStore metodi kojoj možete pristupiti na temelju reference vaše baze podataka. Ova metoda uzima naziv spremišta objekata i konfiguracijski objekt kao argumente.

U konfiguracijskom objektu morate definirati primarni ključ. Primarni ključ možete definirati definiranjem putanje ključa, što je svojstvo koje uvijek postoji i sadrži jedinstvenu vrijednost. Alternativno, možete koristiti generator ključeva postavljanjem keyPath vlasništvo za “iskaznica” i autoincrement vlasništvo na pravi u vašem objektu konfiguracije.

Na primjer:

openRequest.onupgradeneeded = funkcija (događaj) {
konst db = event.target.result;
// Kreirajte pohranu objekata
konst userObjectStore = db.createObjectStore("userStore", {
 put ključa: "iskaznica",
 automatsko povećanje: pravi,
 });
}

Ovaj primjer stvara pohranu objekata pod nazivom "userStore" u vašoj bazi podataka i postavlja svoj primarni ključ na ID koji se automatski povećava.

Definiranje indeksa

U IndexedDB, indeks je način za organiziranje i učinkovitije dohvaćanje podataka. To vam omogućuje pretraživanje pohrane objekata i sortiranje na temelju indeksiranih svojstava.

Da biste definirali indeks na spremištu objekata, koristite createIndex() method of an object pohraniti objekt. Ova metoda uzima naziv indeksa, naziv svojstva i konfiguracijski objekt kao argumente:

userObjectStore.createIndex("Ime", "Ime", { jedinstvena: lažno });
userObjectStore.createIndex("e-pošta", "e-pošta", { jedinstvena: pravi });

Ovaj blok koda iznad definira dva indeksa, "ime" i "e-pošta" na userObjectStore. Indeks "name" nije jedinstven, što znači da više objekata može imati istu vrijednost imena, dok je indeks "e-pošte" jedinstven, čime se osigurava da dva objekta ne mogu imati istu vrijednost e-pošte.

Evo cjelovitog primjera kako se možete nositi s nadograđeno događaj:

openRequest.onupgradeneeded = funkcija (događaj) {
konst db = event.target.result;
// Kreirajte pohranu objekata
konst userObjectStore = db.createObjectStore("userStore", {
 put ključa: "iskaznica",
 automatsko povećanje: pravi,
 }); 
// Stvaranje indeksa
 userObjectStore.createIndex("Ime", "Ime", { jedinstvena: lažno });
 userObjectStore.createIndex("e-pošta", "e-pošta", { jedinstvena: pravi });
};

Dodavanje podataka u IndexedDB

Transakcija u IndexedDB je način grupiranja više operacija čitanja i pisanja u jednu operaciju. Kako bi se osigurala dosljednost i integritet podataka, ako jedna od operacija unutar transakcije ne uspije, IndexedDB vraća sve operacije natrag.

Da biste dodali podatke u bazu podataka IndexedDB, morate stvoriti transakciju na spremištu objekata u koje želite dodati podatke, a zatim upotrijebiti dodati() metoda na transakciji za dodavanje podataka.

Transakciju možete kreirati pozivom na transakcija metodu na vašem objektu baze podataka. Ova metoda uzima dva argumenta: naziv(a) vaše pohrane podataka i način transakcije, koji može biti samo za čitanje (zadano) ili čitati pisati.

Zatim nazovite objectStore() metodu na transakciji i proslijedite naziv pohrane objekta u koji želite dodati podatke. Ova metoda vraća referencu na pohranu objekata.

Na kraju, nazovite dodati() metodu na pohrani objekta i proslijedite podatke koje želite dodati:

konst addUserData = (korisnički podaci, db) => {
// Otvaranje transakcije
konst transakcija = db.transakcija("userStore", "čitaj i piši");
// Dodavanje podataka u pohranu objekata
konst userObjectStore = transaction.objectStore("userStore");
// Podnesite zahtjev za dodavanje korisničkih podataka
konst zahtjev = userObjectStore.add (korisnički podaci);
// Rukovanje uspješnim događajem
 zahtjev.uspjeh = funkcija (događaj) {
//...
 };
// Rješavanje pogreške
 zahtjev.onerror = funkcija (događaj) {
//...
 };
};

Ova funkcija stvara transakciju s pohranom objekata "userStore" i postavlja način na "readwrite". Zatim dobiva pohranu objekata i dodaje korisnički podaci na to pomoću dodati metoda.

Dohvaćanje podataka iz IndexedDB

Da biste dohvatili podatke iz IndexedDB baze podataka, trebate stvoriti transakciju na spremištu objekata iz kojeg želite dohvatiti podatke i zatim upotrijebiti dobiti() ili getAll() metodu transakcije za dohvaćanje podataka ovisno o količini podataka koje želite dohvatiti.

The dobiti() metoda uzima vrijednost za primarni ključ objekta koji želite dohvatiti i vraća objekt s odgovarajućim ključem iz vašeg spremišta objekata.

The getAll() metoda vraća sve podatke u spremištu objekata. Također uzima izborno ograničenje kao argument i vraća sve podudarne podatke iz trgovine.

konst getUserData = (id, db) => {
konst transakcija = db.transakcija("userStore", "samo za čitanje");
konst userObjectStore = transaction.objectStore("userStore");
// Podnesite zahtjev za dobivanje podataka
konst zahtjev = userObjectStore.get (id);
 zahtjev.uspjeh = funkcija (događaj) {
konzola.log (zahtjev.rezultat);
 };
 zahtjev.onerror = funkcija (događaj) {
// Rukovanje pogreškom
 };
};

Ova funkcija stvara transakciju s pohranom objekata "userStore" i postavlja način na "samo za čitanje". Zatim dohvaća korisničke podatke s odgovarajućim ID-om iz spremišta objekata.

Ažuriranje podataka s IndexedDB

Da biste ažurirali podatke u IndexedDB-u, trebate kreirati transakciju s načinom "readwrite". Nastavite dohvaćanjem objekta koji želite ažurirati pomoću dobiti() metoda. Zatim modificirajte objekt i pozovite staviti() metodu na spremištu objekata za spremanje ažuriranog objekta natrag u bazu podataka.

konst updateUserData = (id, korisnički podaci, db) => {
konst transakcija = db.transakcija("userStore", "čitaj i piši");
konst userObjectStore = transaction.objectStore("userStore");
// Podnesite zahtjev za dobivanje podataka
konst getRequest = userObjectStore.get (id);
// Rukovanje uspješnim događajem
 getRequest.onsuccess = funkcija (događaj) {
// Dobivanje starih korisničkih podataka
konst korisnik = event.target.result;
// Ažuriranje korisničkih podataka
 user.name = userData.name;
 korisnik.e-pošta = korisnički podaci.e-pošta;
// Podnesite zahtjev za ažuriranje podataka
konst putRequest = userObjectStore.put (korisnik);
 putRequest.onsuccess = funkcija (događaj) {
// Rukovanje uspjehom
 };
 putRequest.onerror = funkcija (događaj) {
// Rukovanje pogreškom
 };
 };
 getRequest.onerror = funkcija (događaj) {
// Rukovanje pogreškom
 };
};

Ova funkcija stvara transakciju za dobivanje i ažuriranje podataka vaše baze podataka.

Brisanje podataka iz IndexedDB

Da biste izbrisali podatke iz IndexedDB-a, morate stvoriti transakciju s načinom "readwrite". Zatim nazovite izbrisati() metoda na spremištu objekata za uklanjanje objekta iz baze podataka:

konst deleteUserData = (id, db) => {
konst transakcija = db.transakcija("userStore", "čitaj i piši");
konst userObjectStore = transaction.objectStore("userStore");
// Podnesite zahtjev za brisanje podataka
konst zahtjev = userObjectStore.delete (id);
 zahtjev.uspjeh = funkcija (događaj) {
// Rukovanje uspjehom
 };
 zahtjev.onerror = funkcija (događaj) {
// Rukovanje pogreškom
 };
};

Ova funkcija stvara transakciju koja briše podatke s odgovarajućim ID-om iz vaše pohrane objekata.

Trebate li koristiti IndexedDB ili localStorage?

Izbor između IndexedDB i drugih baza podataka na strani klijenta, kao što je localStorage, ovisi o zahtjevima vaše aplikacije. Koristite localStorage za jednostavnu pohranu malih količina podataka. Odaberite IndexedDB za velike skupove strukturiranih podataka koji zahtijevaju postavljanje upita i filtriranje.