Hur man använder IndexedDB som en databas

IndexedDB är en NoSQL-databas på klientsidan som låter dig lagra och hämta strukturerad data i en användares webbläsare.

IndexedDB ger flera fördelar, såsom ett större minne och offlinedatalagring och hämtning jämfört med andra lagringsalternativ, såsom localStorage. Här får du lära dig hur du använder IndexedDB som en databas.

Konfigurera din databas

För att skapa databasen måste du skapa en öppen begäran med hjälp av IndexedDB's öppen metod. De öppen metod returnerar en IDBOpenDBRequest objekt. Detta objekt ger tillgång till Framgång, fel, och uppgraderashändelser som sänds ut från den öppna verksamheten.

De öppen Metoden tar två argument: ett namn och ett valfritt versionsnummer. Namnargumentet representerar namnet på din databas. Versionsnumret anger vilken version av databasen som din applikation förväntar sig att fungera med. Standardvärdet är noll.

Så här skapar du en öppen förfrågan:

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

Efter att ha skapat den öppna förfrågan måste du lyssna och hantera händelserna på det returnerade objektet.

De Framgång händelse inträffar när du skapar databasen framgångsrikt. När det har sänts ut får du tillgång till ditt databasobjekt genom händelse.mål.resultat:

openRequest.onsuccess = fungera (händelse) {
konst db = event.target.result;
trösta.logga("Databas skapad", db);
};

Exemplet ovan hanterar en framgångshändelse genom att logga databasobjektet.

De fel händelse inträffar om IndexedDB stöter på ett problem när databasen skapas. Du kan hantera det genom att logga felet till konsolen eller använda annat felhanteringsmetoder:

openRequest.onerror = fungera (händelse) {
// ...
};

De uppgraderas händelse inträffar när du skapar databasen för första gången eller när du uppdaterar dess version. Den tänds bara en gång, vilket gör den till den idealiska platsen för att skapa en föremålsbutik.

Skapa ett objektlager

Ett objektlager liknar en tabell i relationsdatabaser på serversidan. Du kan använda ett objektlager för att lagra nyckel-värdepar.

Du bör skapa objektlager som svar på uppgraderas händelse. Denna händelse utlöses när du skapar en ny version av databasen eller uppgraderar en befintlig version. Detta säkerställer att databasen är korrekt konfigurerad och uppdaterad innan du lägger till data.

Du kan skapa ett objektlager med hjälp av skapaObjectStore metod, som du kan komma åt på en referens i din databas. Denna metod tar objektlagrets namn och ett konfigurationsobjekt som argument.

I konfigurationsobjektet måste du definiera en primärnyckel. Du kan definiera en primärnyckel genom att definiera en nyckelsökväg, som är en egenskap som alltid finns och innehåller ett unikt värde. Alternativt kan du använda en nyckelgenerator genom att ställa in nyckelPath egendom till "id" och den autoInkrement egendom till Sann i ditt konfigurationsobjekt.

Till exempel:

openRequest.onupgradeneeded = fungera (händelse) {
konst db = event.target.result;
// Skapa ett objektlager
konst userObjectStore = db.createObjectStore("userStore", {
 nyckelväg: "id",
 autoInkrement: Sann,
 });
}

Det här exemplet skapar ett objektlager med namnet "userStore" i din databas och ställer in dess primärnyckel till ett auto-inkrementerande id.

Definiera index

I IndexedDB är ett index ett sätt att organisera och hämta data mer effektivt. Detta låter dig söka i objektlagret och sortera det baserat på de indexerade egenskaperna.

För att definiera ett index på ett objektlager, använd createIndex() metod för ett objektlagerobjekt. Den här metoden tar ett indexnamn, ett egenskapsnamn och ett konfigurationsobjekt som argument:

userObjectStore.createIndex("namn", "namn", { unik: falsk });
userObjectStore.createIndex("e-post", "e-post", { unik: Sann });

Detta kodblock ovan definierar två index, "namn" och "e-post" på userObjectStore. "Namn"-indexet är icke-unik, vilket innebär att flera objekt kan ha samma namnvärde, medan "e-post"-indexet är unikt, vilket säkerställer att inte två objekt kan ha samma e-postvärde.

Här är ett komplett exempel på hur du kan hantera en uppgraderas händelse:

openRequest.onupgradeneeded = fungera (händelse) {
konst db = event.target.result;
// Skapa ett objektlager
konst userObjectStore = db.createObjectStore("userStore", {
 nyckelväg: "id",
 autoInkrement: Sann,
 }); 
// Skapa index
 userObjectStore.createIndex("namn", "namn", { unik: falsk });
 userObjectStore.createIndex("e-post", "e-post", { unik: Sann });
};

Lägga till data till IndexedDB

En transaktion i IndexedDB är ett sätt att gruppera flera läs- och skrivoperationer i en enda operation. För att säkerställa datakonsistens och integritet, om en av operationerna i en transaktion misslyckas, återställer IndexedDB alla operationer.

För att lägga till data till en IndexedDB-databas måste du skapa en transaktion på objektarkivet du vill lägga till data och sedan använda Lägg till() metod på transaktionen för att lägga till data.

Du kan skapa en transaktion genom att ringa transaktion metod på ditt databasobjekt. Den här metoden tar två argument: Namnet på din datalagring och läget för transaktionen, vilket kan vara skrivskyddad (standard) eller läsa skriva.

Ring sedan objectStore() metod på transaktionen och skicka namnet på objektarkivet du vill lägga till data till. Denna metod returnerar en referens till objektlagret.

Ring slutligen Lägg till() metod i objektlagret och skicka in data du vill lägga till:

konst addUserData = (användardata, db) => {
// Öppna en transaktion
konst transaktion = db.transaction("userStore", "läsa skriva");
// Lägg till data till objektlagret
konst userObjectStore = transaktion.objectStore("userStore");
// Gör en begäran om att lägga till användardata
konst request = userObjectStore.add (userData);
// Hantera ett framgångsevenemang
 request.onsuccess = fungera (händelse) {
//...
 };
// Hantera ett fel
 request.onerror = fungera (händelse) {
//...
 };
};

Denna funktion skapar en transaktion med objektlagret "userStore" och ställer in läget på "lässkriv". Sedan hämtar den objektarkivet och lägger till användardata till det med hjälp av Lägg till metod.

Hämtar data från IndexedDB

För att hämta data från en IndexedDB-databas måste du skapa en transaktion på objektarkivet du vill hämta data från och sedan använda skaffa sig() eller få alla() metod på transaktionen för att hämta data beroende på mängden data du vill hämta.

De skaffa sig() metod tar ett värde för primärnyckeln för objektet du vill hämta och returnerar objektet med motsvarande nyckel från ditt objektlager.

De få alla() metod returnerar all data i ett objektlager. Det tar också en valfri begränsning som ett argument och returnerar all matchande data från butiken.

konst getUserData = (id, db) => {
konst transaktion = db.transaction("userStore", "skrivskyddad");
konst userObjectStore = transaktion.objectStore("userStore");
// Gör en begäran om att få data
konst request = userObjectStore.get (id);
 request.onsuccess = fungera (händelse) {
trösta.log (request.result);
 };
 request.onerror = fungera (händelse) {
// Hanteringsfel
 };
};

Denna funktion skapar en transaktion med objektlagret "userStore" och ställer in läget till "skrivskyddad". Den hämtar sedan användardata med matchande id från objektlagret.

Uppdatera data med IndexedDB

För att uppdatera data i IndexedDB måste du skapa en transaktion med "lässkriv"-läget. Fortsätt genom att hämta objektet du vill uppdatera med hjälp av skaffa sig() metod. Ändra sedan objektet och anropa sätta() metod på objektlagret för att spara det uppdaterade objektet tillbaka till databasen.

konst updateUserData = (id, användardata, db) => {
konst transaktion = db.transaction("userStore", "läsa skriva");
konst userObjectStore = transaktion.objectStore("userStore");
// Gör en begäran om att få data
konst getRequest = userObjectStore.get (id);
// Hantera ett framgångsevenemang
 getRequest.onsuccess = fungera (händelse) {
// Hämta gamla användardata
konst user = event.target.result;
// Uppdatera användardata
 användarnamn = användardata.namn;
 user.email = userData.email;
// Gör en begäran om att uppdatera data
konst putRequest = userObjectStore.put (användare);
 putRequest.onsuccess = fungera (händelse) {
// Hantera framgång
 };
 putRequest.onerror = fungera (händelse) {
// Hanteringsfel
 };
 };
 getRequest.onerror = fungera (händelse) {
// Hanteringsfel
 };
};

Denna funktion skapar en transaktion för att hämta och uppdatera din databas data.

Ta bort data från IndexedDB

För att radera data från IndexedDB måste du skapa en transaktion med "lässkriv"-läget. Ring sedan till radera() metod i objektarkivet för att ta bort objektet från databasen:

konst deleteUserData = (id, db) => {
konst transaktion = db.transaction("userStore", "läsa skriva");
konst userObjectStore = transaktion.objectStore("userStore");
// Gör en begäran om att radera data
konst request = userObjectStore.delete (id);
 request.onsuccess = fungera (händelse) {
// Hantera framgång
 };
 request.onerror = fungera (händelse) {
// Hanteringsfel
 };
};

Denna funktion skapar en transaktion som raderar data med motsvarande id från ditt objektlager.

Ska du använda IndexedDB eller localStorage?

Valet mellan IndexedDB och andra databaser på klientsidan, såsom localStorage, beror på din applikations krav. Använd localStorage för enkel lagring av små mängder data. Välj IndexedDB för stora strukturerade datamängder som kräver sökning och filtrering.