Sådan bruger du IndexedDB som en database

IndexedDB er en NoSQL-database på klientsiden, der giver dig mulighed for at gemme og hente strukturerede data i en brugers webbrowser.

IndexedDB giver flere fordele, såsom en større hukommelse og offline datalagring og hentning i forhold til andre lagermuligheder, såsom localStorage. Her lærer du, hvordan du bruger IndexedDB som database.

Opsætning af din database

For at oprette databasen skal du oprette en åben anmodning ved hjælp af IndexedDB's åben metode. Det åben metode returnerer en IDBOpenDBRequest objekt. Dette objekt giver adgang til succes, fejl, og opgraderet nødvendighændelser udsendt fra den åbne operation.

Det åben metoden tager to argumenter: et navn og et valgfrit versionsnummer. Navneargumentet repræsenterer navnet på din database. Versionsnummeret angiver den version af databasen, som din applikation forventer at arbejde med. Standardværdien er nul.

Sådan opretter du en åben anmodning:

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

Efter at have oprettet den åbne anmodning, skal du lytte og håndtere begivenhederne på den returnerede genstand.

Det succes hændelse opstår, når du opretter databasen med succes. Når først udsendt, får du adgang til dit databaseobjekt igennem begivenhed.mål.resultat:

openRequest.onsuccess = fungere (begivenhed) {
konst db = begivenhed.mål.resultat;
konsol.log("Database oprettet", db);
};

Eksemplet ovenfor håndterer en succeshændelse ved at logge databaseobjektet.

Det fejl hændelse opstår, hvis IndexedDB støder på et problem under oprettelse af databasen. Du kan håndtere det ved at logge fejlen til konsollen eller bruge andet fejlhåndteringsmetoder:

openRequest.onerror = fungere (begivenhed) {
// ...
};

Det opgraderet nødvendig hændelse opstår, når du opretter databasen for første gang, eller når du opdaterer dens version. Den affyres kun én gang, hvilket gør den til det ideelle sted at skabe et objektlager.

Oprettelse af et objektlager

Et objektlager ligner en tabel i relationelle databaser på serversiden. Du kan bruge et objektlager til at gemme nøgleværdi-par.

Du bør oprette objektlagre som svar på opgraderet nødvendig begivenhed. Denne hændelse udløses, når du opretter en ny version af databasen eller opgraderer en eksisterende version. Dette sikrer, at databasen er konfigureret korrekt og opdateret, før du tilføjer data.

Du kan oprette et objektlager ved hjælp af opretteObjectStore metode, som du kan få adgang til på en reference i din database. Denne metode tager objektlagerets navn og et konfigurationsobjekt som argumenter.

I konfigurationsobjektet skal du definere en primær nøgle. Du kan definere en primær nøgle ved at definere en nøglesti, som er en egenskab, der altid eksisterer og indeholder en unik værdi. Alternativt kan du bruge en nøglegenerator ved at indstille nøglesti ejendom til "id" og autoInkrement ejendom til rigtigt i dit konfigurationsobjekt.

For eksempel:

openRequest.onupgradeneeded = fungere (begivenhed) {
konst db = begivenhed.mål.resultat;
// Opret et objektlager
konst userObjectStore = db.createObjectStore("userStore", {
 nøglesti: "id",
 autoIncrement: rigtigt,
 });
}

Dette eksempel opretter et objektlager med navnet "userStore" i din database og sætter dens primære nøgle til et auto-inkrementerende id.

Definition af indekser

I IndexedDB er et indeks en måde at organisere og hente data mere effektivt på. Dette giver dig mulighed for at søge i objektlageret og sortere det baseret på de indekserede egenskaber.

For at definere et indeks på et objektlager skal du bruge createIndex() metode til et objektlagerobjekt. Denne metode tager et indeksnavn, et egenskabsnavn og et konfigurationsobjekt som argumenter:

userObjectStore.createIndex("navn", "navn", { enestående: falsk });
userObjectStore.createIndex("e-mail", "e-mail", { enestående: rigtigt });

Denne kodeblok ovenfor definerer to indekser, "navn" og "e-mail" på userObjectStore. "Navn"-indekset er ikke-unik, hvilket betyder, at flere objekter kan have samme navneværdi, mens "e-mail"-indekset er unikt, hvilket sikrer, at ikke to objekter kan have den samme e-mail-værdi.

Her er et komplet eksempel på, hvordan du kan håndtere en opgraderet nødvendig begivenhed:

openRequest.onupgradeneeded = fungere (begivenhed) {
konst db = begivenhed.mål.resultat;
// Opret et objektlager
konst userObjectStore = db.createObjectStore("userStore", {
 nøglesti: "id",
 autoIncrement: rigtigt,
 }); 
// Opret indekser
 userObjectStore.createIndex("navn", "navn", { enestående: falsk });
 userObjectStore.createIndex("e-mail", "e-mail", { enestående: rigtigt });
};

Tilføjelse af data til IndexedDB

En transaktion i IndexedDB er en måde at gruppere flere læse- og skriveoperationer i en enkelt operation. For at sikre datakonsistens og integritet, ruller IndexedDB alle operationerne tilbage, hvis en af ​​operationerne i en transaktion mislykkes.

For at tilføje data til en IndexedDB-database skal du oprette en transaktion på det objektlager, du vil tilføje dataene, og derefter bruge tilføje() metode på transaktionen for at tilføje data.

Du kan oprette en transaktion ved at ringe til transaktion metode på dit databaseobjekt. Denne metode tager to argumenter: Navnet/navnene på dit datalager og transaktionstilstanden, som kan være Læs kun (standard) eller læse skrive.

Så ring til objectStore() metode på transaktionen og videregive navnet på det objektlager, du vil tilføje data til. Denne metode returnerer en reference til objektlageret.

Ring endelig til tilføje() metode på objektlageret og indsend de data, du vil tilføje:

konst addUserData = (brugerdata, db) => {
// Åbn en transaktion
konst transaktion = db.transaktion("userStore", "læse skrive");
// Tilføj data til objektlageret
konst userObjectStore = transaktion.objectStore("userStore");
// Lav en anmodning om at tilføje brugerdata
konst request = userObjectStore.add (brugerData);
// Håndter en succesbegivenhed
 request.onsuccess = fungere (begivenhed) {
//...
 };
// Håndter en fejl
 request.onerror = fungere (begivenhed) {
//...
 };
};

Denne funktion opretter en transaktion med objektlageret "userStore" og indstiller tilstanden til "readwrite". Derefter henter den objektlageret og tilføjer brugerdata til det ved hjælp af tilføje metode.

Henter data fra IndexedDB

For at hente data fra en IndexedDB-database skal du oprette en transaktion på det objektlager, du vil hente dataene fra, og derefter bruge få() eller getAll() metode på transaktionen for at hente dataene afhængigt af mængden af ​​data, du ønsker at hente.

Det få() metoden tager en værdi for den primære nøgle for det objekt, du vil hente, og returnerer objektet med den tilsvarende nøgle fra dit objektlager.

Det getAll() metode returnerer alle data i et objektlager. Det tager også en valgfri begrænsning som argument og returnerer alle matchende data fra butikken.

konst getUserData = (id, db) => {
konst transaktion = db.transaktion("userStore", "Læs kun");
konst userObjectStore = transaktion.objectStore("userStore");
// Lav en anmodning om at få dataene
konst request = userObjectStore.get (id);
 request.onsuccess = fungere (begivenhed) {
konsol.log (request.result);
 };
 request.onerror = fungere (begivenhed) {
// Håndteringsfejl
 };
};

Denne funktion opretter en transaktion med objektlageret "userStore" og indstiller tilstanden til "skrivebeskyttet". Den henter derefter brugerdata med det matchende id fra objektlageret.

Opdatering af data med IndexedDB

For at opdatere data i IndexedDB skal du oprette en transaktion med "readwrite"-tilstanden. Fortsæt med at hente det objekt, du vil opdatere, ved hjælp af få() metode. Rediger derefter objektet og kald sætte() metode på objektlageret for at gemme det opdaterede objekt tilbage til databasen.

konst updateUserData = (id, brugerdata, db) => {
konst transaktion = db.transaktion("userStore", "læse skrive");
konst userObjectStore = transaktion.objectStore("userStore");
// Lav en anmodning om at få dataene
konst getRequest = userObjectStore.get (id);
// Håndter en succesbegivenhed
 getRequest.onsuccess = fungere (begivenhed) {
// Hent de gamle brugerdata
konst bruger = hændelse.mål.resultat;
// Opdater brugerdataene
 bruger.navn = brugerData.navn;
 bruger.e-mail = brugerData.e-mail;
// Lav en anmodning om at opdatere dataene
konst putRequest = userObjectStore.put (bruger);
 putRequest.onsuccess = fungere (begivenhed) {
// Håndter succes
 };
 putRequest.onerror = fungere (begivenhed) {
// Håndteringsfejl
 };
 };
 getRequest.onerror = fungere (begivenhed) {
// Håndteringsfejl
 };
};

Denne funktion opretter en transaktion for at hente og opdatere din databases data.

Sletning af data fra IndexedDB

For at slette data fra IndexedDB skal du oprette en transaktion med "readwrite"-tilstanden. Så ring til slet() metode på objektlageret for at fjerne objektet fra databasen:

konst deleteUserData = (id, db) => {
konst transaktion = db.transaktion("userStore", "læse skrive");
konst userObjectStore = transaktion.objectStore("userStore");
// Lav en anmodning om at slette dataene
konst request = userObjectStore.delete (id);
 request.onsuccess = fungere (begivenhed) {
// Håndter succes
 };
 request.onerror = fungere (begivenhed) {
// Håndteringsfejl
 };
};

Denne funktion opretter en transaktion, der sletter dataene med det tilsvarende id fra dit objektlager.

Skal du bruge IndexedDB eller localStorage?

Valget mellem IndexedDB og andre databaser på klientsiden, såsom localStorage, afhænger af din applikations krav. Brug localStorage til enkel opbevaring af små mængder data. Vælg IndexedDB for store strukturerede datasæt, der kræver forespørgsel og filtrering.