Cum să utilizați IndexedDB ca bază de date

IndexedDB este o bază de date NoSQL la nivelul clientului, care vă permite să stocați și să preluați date structurate în browserul web al unui utilizator.

IndexedDB oferă mai multe avantaje, cum ar fi o memorie mai mare și stocarea și recuperarea datelor offline față de alte opțiuni de stocare, cum ar fi localStorage. Aici veți învăța cum să utilizați IndexedDB ca bază de date.

Configurarea bazei de date

Pentru a crea baza de date, trebuie să creați o cerere deschisă folosind IndexedDB deschis metodă. The deschis metoda returnează un IDBOpenDBRequest obiect. Acest obiect oferă acces la succes, eroare, și este necesarevenimente emise din operațiunea deschisă.

The deschis metoda are două argumente: un nume și un număr opțional de versiune. Argumentul nume reprezintă numele bazei de date. Numărul de versiune specifică versiunea bazei de date cu care se așteaptă să lucreze aplicația dvs. Valoarea implicită este zero.

Iată cum puteți crea o solicitare deschisă:

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

După crearea cererii deschise, trebuie să ascultați și gestionează evenimentele asupra obiectului returnat.

The succes evenimentul are loc atunci când creați cu succes baza de date. Odată emis, aveți acces la obiectul bazei de date prin intermediul eveniment.țintă.rezultat:

openRequest.onsuccess = funcţie (eveniment) {
const db = event.target.result;
consolă.Buturuga("Bază de date creată", db);
};

Exemplul de mai sus gestionează un eveniment de succes prin înregistrarea obiectului bazei de date.

The eroare evenimentul are loc dacă IndexedDB întâmpină o problemă în timpul creării bazei de date. Puteți să o gestionați înregistrând eroarea în consolă sau folosind altele metode de tratare a erorilor:

openRequest.onerror = funcţie (eveniment) {
// ...
};

The este necesar evenimentul are loc atunci când creați baza de date pentru prima dată sau când actualizați versiunea acesteia. Se trage o singură dată, făcându-l locul ideal pentru a crea un depozit de obiecte.

Crearea unui depozit de obiecte

Un depozit de obiecte este similar cu un tabel din bazele de date relaționale pe partea de server. Puteți folosi un depozit de obiecte pentru a stoca perechi cheie-valoare.

Ar trebui să creați depozite de obiecte ca răspuns la este necesar eveniment. Acest eveniment se declanșează atunci când creați o nouă versiune a bazei de date sau actualizați o versiune existentă. Acest lucru asigură că baza de date este configurată corect și actualizată înainte de a adăuga date.

Puteți crea un depozit de obiecte folosind createObjectStore metoda, pe care o puteți accesa pe o referință a bazei de date. Această metodă ia ca argumente numele depozitului de obiecte și un obiect de configurare.

În obiectul de configurare, trebuie să definiți o cheie primară. Puteți defini o cheie primară definind o cale de cheie, care este o proprietate care există întotdeauna și conține o valoare unică. Alternativ, puteți utiliza un generator de chei setând keyPath proprietate la „id" si increment auto proprietate la Adevărat în obiectul dvs. de configurare.

De exemplu:

openRequest.onupgradeneeded = funcţie (eveniment) {
const db = event.target.result;
// Creați un depozit de obiecte
const userObjectStore = db.createObjectStore(„UserStore”, {
 KeyPath: "id",
 increment auto: Adevărat,
 });
}

Acest exemplu creează un depozit de obiecte numit „userStore” în baza de date și setează cheia primară la un ID cu incrementare automată.

Definirea indicilor

În IndexedDB, un index este o modalitate de a organiza și de a prelua datele mai eficient. Acest lucru vă permite să căutați în depozitul de obiecte și să îl sortați pe baza proprietăților indexate.

Pentru a defini un index pe un depozit de obiecte, utilizați createIndex() metoda unui obiect depozit de obiecte. Această metodă ia ca argumente un nume de index, un nume de proprietate și un obiect de configurare:

userObjectStore.createIndex("Nume", "Nume", { unic: fals });
userObjectStore.createIndex("e-mail", "e-mail", { unic: Adevărat });

Acest bloc de cod de mai sus definește doi indecși, „nume” și „e-mail” pe userObjectStore. Indexul „nume” nu este unic, ceea ce înseamnă că mai multe obiecte pot avea aceeași valoare de nume, în timp ce indexul „e-mail” este unic, asigurându-se că două obiecte nu pot avea aceeași valoare de e-mail.

Iată un exemplu complet despre cum puteți gestiona un este necesar eveniment:

openRequest.onupgradeneeded = funcţie (eveniment) {
const db = event.target.result;
// Creați un depozit de obiecte
const userObjectStore = db.createObjectStore(„UserStore”, {
 KeyPath: "id",
 increment auto: Adevărat,
 }); 
// Creați indecși
 userObjectStore.createIndex("Nume", "Nume", { unic: fals });
 userObjectStore.createIndex("e-mail", "e-mail", { unic: Adevărat });
};

Adăugarea datelor la IndexedDB

O tranzacție în IndexedDB este o modalitate de a grupa mai multe operațiuni de citire și scriere într-o singură operație. Pentru a asigura consistența și integritatea datelor, dacă una dintre operațiunile dintr-o tranzacție eșuează, IndexedDB derulează înapoi toate operațiunile.

Pentru a adăuga date la o bază de date IndexedDB, trebuie să creați o tranzacție în depozitul de obiecte în care doriți să adăugați datele și apoi să utilizați adăuga() metoda pe tranzacție pentru a adăuga datele.

Puteți crea o tranzacție apelând la tranzacţie metoda pe obiectul bazei de date. Această metodă are două argumente: numele (numele) depozitului de date și modul tranzacției, care poate fi numai citire (implicit) sau Citeste, scrie.

Apoi, sunați la obiectStore() metoda pe tranzacție și transmiteți numele depozitului de obiecte la care doriți să adăugați date. Această metodă returnează o referință la depozitul de obiecte.

În cele din urmă, sunați la adăuga() metoda pe depozitul de obiecte și transmiteți datele pe care doriți să le adăugați:

const addUserData = (userData, db) => {
// Deschide o tranzacție
const tranzacție = db.transaction(„UserStore”, "Citeste, scrie");
// Adăugați date în depozitul de obiecte
const userObjectStore = transaction.objectStore(„UserStore”);
// Faceți o solicitare pentru adăugarea userData
const cerere = userObjectStore.add (userData);
// Gestionați un eveniment de succes
 cerere.onsuccess = funcţie (eveniment) {
//...
 };
// Gestionează o eroare
 cerere.onerror = funcţie (eveniment) {
//...
 };
};

Această funcție creează o tranzacție cu depozitul de obiecte „userStore” și setează modul la „readwrite”. Apoi, primește depozitul de obiecte și adaugă datele utilizatorului la el folosind adăuga metodă.

Preluarea datelor din IndexedDB

Pentru a prelua date dintr-o bază de date IndexedDB, trebuie să creați o tranzacție în depozitul de obiecte din care doriți să recuperați datele și apoi să utilizați obține() sau ia tot() metoda pe tranzacție pentru a prelua datele în funcție de cantitatea de date pe care doriți să o preluați.

The obține() metoda ia o valoare pentru cheia primară a obiectului pe care doriți să-l preluați și returnează obiectul cu cheia corespunzătoare din depozitul dvs. de obiecte.

The ia tot() metoda returnează toate datele dintr-un depozit de obiecte. De asemenea, ia o constrângere opțională ca argument și returnează toate datele potrivite din magazin.

const getUserData = (id, db) => {
const tranzacție = db.transaction(„UserStore”, "numai citire");
const userObjectStore = transaction.objectStore(„UserStore”);
// Faceți o cerere pentru a obține datele
const cerere = userObjectStore.get (id);
 cerere.onsuccess = funcţie (eveniment) {
consolă.log (cerere.rezultat);
 };
 cerere.onerror = funcţie (eveniment) {
// Gestionează eroarea
 };
};

Această funcție creează o tranzacție cu magazinul de obiecte „userStore” și setează modul la „readonly”. Apoi preia datele utilizatorului cu id-ul potrivit din depozitul de obiecte.

Actualizarea datelor cu IndexedDB

Pentru a actualiza datele în IndexedDB, trebuie să creați o tranzacție cu modul „readwrite”. Continuați prin preluarea obiectului pe care doriți să îl actualizați folosind obține() metodă. Apoi modificați obiectul și apelați a pune() metoda din depozitul de obiecte pentru a salva obiectul actualizat înapoi în baza de date.

const updateUserData = (id, userData, db) => {
const tranzacție = db.transaction(„UserStore”, "Citeste, scrie");
const userObjectStore = transaction.objectStore(„UserStore”);
// Faceți o cerere pentru a obține datele
const getRequest = userObjectStore.get (id);
// Gestionați un eveniment de succes
 getRequest.onsuccess = funcţie (eveniment) {
// Obțineți datele vechi ale utilizatorului
const utilizator = event.target.result;
// Actualizați datele utilizatorului
 user.name = userData.name;
 user.email = userData.email;
// Faceți o solicitare de actualizare a datelor
const putRequest = userObjectStore.put (utilizator);
 putRequest.onsuccess = funcţie (eveniment) {
// Gestionați succesul
 };
 putRequest.onerror = funcţie (eveniment) {
// Gestionează eroarea
 };
 };
 getRequest.onerror = funcţie (eveniment) {
// Gestionează eroarea
 };
};

Această funcție creează o tranzacție pentru a obține și actualiza datele bazei de date.

Ștergerea datelor din IndexedDB

Pentru a șterge datele din IndexedDB, trebuie să creați o tranzacție cu modul „readwrite”. Apoi sunați la șterge() metoda din depozitul de obiecte pentru a elimina obiectul din baza de date:

const deleteUserData = (id, db) => {
const tranzacție = db.transaction(„UserStore”, "Citeste, scrie");
const userObjectStore = transaction.objectStore(„UserStore”);
// Faceți o cerere de ștergere a datelor
const cerere = userObjectStore.delete (id);
 cerere.onsuccess = funcţie (eveniment) {
// Gestionați succesul
 };
 cerere.onerror = funcţie (eveniment) {
// Gestionează eroarea
 };
};

Această funcție creează o tranzacție care șterge datele cu id-ul corespunzător din magazinul dvs. de obiecte.

Ar trebui să utilizați IndexedDB sau localStorage?

Alegerea dintre IndexedDB și alte baze de date la nivel client, cum ar fi localStorage, depinde de cerințele aplicației dvs. Utilizați localStorage pentru stocarea simplă a unor cantități mici de date. Alegeți IndexedDB pentru seturi mari de date structurate care necesită interogare și filtrare.