Ako používať IndexedDB ako databázu

IndexedDB je databáza NoSQL na strane klienta, ktorá vám umožňuje ukladať a získavať štruktúrované údaje vo webovom prehliadači používateľa.

IndexedDB poskytuje niekoľko výhod, ako je väčšia pamäť a offline ukladanie a získavanie údajov v porovnaní s inými možnosťami ukladania, ako je localStorage. Tu sa dozviete, ako používať IndexedDB ako databázu.

Nastavenie databázy

Ak chcete vytvoriť databázu, musíte vytvoriť otvorenú požiadavku pomocou IndexedDB's OTVORENÉ metóda. The OTVORENÉ metóda vracia an IDBOpenDBRequest objekt. Tento objekt poskytuje prístup k úspech, chyba, a potrebná aktualizáciaemitované udalosti z otvorenej prevádzky.

The OTVORENÉ metóda má dva argumenty: názov a voliteľné číslo verzie. Argument name predstavuje názov vašej databázy. Číslo verzie určuje verziu databázy, s ktorou vaša aplikácia očakáva prácu. Predvolená hodnota je nula.

Tu je postup, ako vytvoriť otvorenú žiadosť:

konšt openRequest = indexedDB.open("usersdb", 1);

Po vytvorení otvorenej požiadavky musíte počúvať a zvládnuť udalosti na vrátenom predmete.

The úspech udalosť nastane, keď úspešne vytvoríte databázu. Po vydaní získate prístup k svojmu databázovému objektu prostredníctvom udalosť.cieľový.výsledok:

openRequest.onsuccess = funkciu (udalosť) {
konšt db = event.target.result;
konzoly.log("Databáza vytvorená", db);
};

Vyššie uvedený príklad spracováva úspešnú udalosť protokolovaním databázového objektu.

The chyba udalosť nastane, ak IndexedDB narazí na problém pri vytváraní databázy. Môžete to vyriešiť zalogovaním chyby do konzoly alebo pomocou iného metódy odstraňovania chýb:

openRequest.onerror = funkciu (udalosť) {
// ...
};

The potrebná aktualizácia udalosť nastane, keď vytvoríte databázu prvýkrát alebo keď aktualizujete jej verziu. Vystrelí len raz, čo z neho robí ideálne miesto na vytvorenie skladu predmetov.

Vytvorenie skladu objektov

Sklad objektov je podobný tabuľke v relačných databázach na strane servera. Na uloženie párov kľúč – hodnota môžete použiť sklad objektov.

Mali by ste vytvoriť sklady objektov ako odpoveď na potrebná aktualizácia udalosť. Táto udalosť sa spustí, keď vytvoríte novú verziu databázy alebo inovujete existujúcu verziu. To zaisťuje, že databáza je nakonfigurovaná správne a aktuálna pred pridaním akýchkoľvek údajov.

Úložisko objektov môžete vytvoriť pomocou createObjectStore metódu, ku ktorej máte prístup na základe referencie vašej databázy. Táto metóda berie ako argumenty názov skladu objektov a konfiguračný objekt.

V konfiguračnom objekte musíte definovať primárny kľúč. Primárny kľúč môžete definovať definovaním cesty kľúča, čo je vlastnosť, ktorá vždy existuje a obsahuje jedinečnú hodnotu. Prípadne môžete použiť generátor kľúčov nastavením keyPath majetok do „id“a Automatický prírastok majetok do pravda vo vašom konfiguračnom objekte.

Napríklad:

openRequest.onupgradeneeded = funkciu (udalosť) {
konšt db = event.target.result;
// Vytvorenie úložiska objektov
konšt userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 Automatický prírastok: pravda,
 });
}

Tento príklad vytvorí vo vašej databáze úložisko objektov s názvom „userStore“ a nastaví jeho primárny kľúč na automaticky sa zvyšujúce id.

Definovanie indexov

V IndexedDB je index spôsob, ako efektívnejšie organizovať a získavať údaje. To vám umožňuje prehľadávať sklad objektov a triediť ho na základe indexovaných vlastností.

Ak chcete definovať index na sklade objektov, použite createIndex() metóda objektu ukladania objektov. Táto metóda berie ako argumenty názov indexu, názov vlastnosti a konfiguračný objekt:

userObjectStore.createIndex("názov", "názov", { jedinečný: falošný });
userObjectStore.createIndex("e-mail", "e-mail", { jedinečný: pravda });

Tento blok kódu vyššie definuje dva indexy, „meno“ a „e-mail“ na userObjectStore. Index „meno“ nie je jedinečný, čo znamená, že viaceré objekty môžu mať rovnakú hodnotu názvu, zatiaľ čo index „e-mail“ je jedinečný, čo zaisťuje, že žiadne dva objekty nemôžu mať rovnakú hodnotu e-mailu.

Tu je úplný príklad toho, ako môžete zvládnuť potrebná aktualizácia udalosť:

openRequest.onupgradeneeded = funkciu (udalosť) {
konšt db = event.target.result;
// Vytvorenie úložiska objektov
konšt userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 Automatický prírastok: pravda,
 }); 
// Vytvorenie indexov
 userObjectStore.createIndex("názov", "názov", { jedinečný: falošný });
 userObjectStore.createIndex("e-mail", "e-mail", { jedinečný: pravda });
};

Pridávanie údajov do IndexedDB

Transakcia v IndexedDB je spôsob, ako zoskupiť viacero operácií čítania a zápisu do jednej operácie. Na zabezpečenie konzistencie a integrity údajov, ak jedna z operácií v rámci transakcie zlyhá, IndexedDB vráti späť všetky operácie.

Ak chcete pridať údaje do databázy IndexedDB, musíte vytvoriť transakciu v úložisku objektov, do ktorého chcete pridať údaje, a potom použiť pridať () spôsob na transakciu na pridanie údajov.

Transakciu môžete vytvoriť zavolaním na transakcie metóda na vašom databázovom objekte. Táto metóda má dva argumenty: názov (názvy) vášho dátového skladu a režim transakcie, ktorý môže byť iba na čítanie (predvolené) alebo čítaj píš.

Potom zavolajte na objectStore() metódu na transakciu a odovzdajte názov skladu objektov, do ktorého chcete pridať údaje. Táto metóda vráti odkaz na sklad objektov.

Nakoniec zavolajte na pridať () metódu v úložisku objektov a odovzdajte údaje, ktoré chcete pridať:

konšt addUserData = (userData, db) => {
// Otvorenie transakcie
konšt transakcia = db.transaction("userStore", "čítaj píš");
// Pridanie údajov do úložiska objektov
konšt userObjectStore = transakcia.objectStore("userStore");
// Vytvorte požiadavku na pridanie userData
konšt request = userObjectStore.add (userData);
// Spravte úspešnú udalosť
 žiadosť.úspech = funkciu (udalosť) {
//...
 };
// Oprava chyby
 request.onerror = funkciu (udalosť) {
//...
 };
};

Táto funkcia vytvorí transakciu s objektom "userStore" a nastaví režim na "readwrite". Potom získa úložisko objektov a pridá použivateľské dáta k tomu pomocou pridať metóda.

Načítanie údajov z indexovanej databázy

Ak chcete získať údaje z databázy IndexedDB, musíte vytvoriť transakciu v úložisku objektov, z ktorého chcete získať údaje, a potom použiť dostať () alebo získať všetko() metóda na transakciu na získanie údajov v závislosti od množstva údajov, ktoré chcete získať.

The dostať () metóda prevezme hodnotu primárneho kľúča objektu, ktorý chcete získať, a vráti objekt so zodpovedajúcim kľúčom z vášho skladu objektov.

The získať všetko() metóda vráti všetky údaje v objekte. Vezme tiež voliteľné obmedzenie ako argument a vráti všetky zodpovedajúce údaje z obchodu.

konšt getUserData = (id, db) => {
konšt transakcia = db.transaction("userStore", "iba na čítanie");
konšt userObjectStore = transakcia.objectStore("userStore");
// Požiadajte o získanie údajov
konšt request = userObjectStore.get (id);
 žiadosť.úspech = funkciu (udalosť) {
konzoly.log (požiadavka.výsledok);
 };
 request.onerror = funkciu (udalosť) {
// Chyba spracovania
 };
};

Táto funkcia vytvorí transakciu s objektom „userStore“ a nastaví režim na „len na čítanie“. Potom získa používateľské údaje so zodpovedajúcim ID z úložiska objektov.

Aktualizácia údajov pomocou IndexedDB

Ak chcete aktualizovať údaje v IndexedDB, musíte vytvoriť transakciu v režime „čítanie a zápis“. Pokračujte získaním objektu, ktorý chcete aktualizovať, pomocou dostať () metóda. Potom upravte objekt a zavolajte dať () na uloženie objektu na uloženie aktualizovaného objektu späť do databázy.

konšt updateUserData = (id, userData, db) => {
konšt transakcia = db.transaction("userStore", "čítaj píš");
konšt userObjectStore = transakcia.objectStore("userStore");
// Požiadajte o získanie údajov
konšt getRequest = userObjectStore.get (id);
// Spravte úspešnú udalosť
 getRequest.onsuccess = funkciu (udalosť) {
// Získanie starých používateľských údajov
konšt user = event.target.result;
// Aktualizácia používateľských údajov
 user.name = userData.name;
 user.email = userData.email;
// Požiadajte o aktualizáciu údajov
konšt putRequest = userObjectStore.put (používateľ);
 putRequest.onsuccess = funkciu (udalosť) {
// Zvládnite úspech
 };
 putRequest.onerror = funkciu (udalosť) {
// Chyba spracovania
 };
 };
 getRequest.onerror = funkciu (udalosť) {
// Chyba spracovania
 };
};

Táto funkcia vytvorí transakciu na získanie a aktualizáciu údajov vašej databázy.

Odstránenie údajov z indexovanej databázy

Ak chcete odstrániť údaje z IndexedDB, musíte vytvoriť transakciu v režime „čítanie a zápis“. Potom zavolajte na vymazať () metóda na sklade objektov na odstránenie objektu z databázy:

konšt deleteUserData = (id, db) => {
konšt transakcia = db.transaction("userStore", "čítaj píš");
konšt userObjectStore = transakcia.objectStore("userStore");
// Požiadajte o vymazanie údajov
konšt request = userObjectStore.delete (id);
 žiadosť.úspech = funkciu (udalosť) {
// Zvládnite úspech
 };
 request.onerror = funkciu (udalosť) {
// Chyba spracovania
 };
};

Táto funkcia vytvorí transakciu, ktorá vymaže údaje s príslušným ID z vášho skladu objektov.

Mali by ste použiť IndexedDB alebo localStorage?

Voľba medzi IndexedDB a inými databázami na strane klienta, ako je localStorage, závisí od požiadaviek vašej aplikácie. Použite localStorage na jednoduché ukladanie malého množstva údajov. Vyberte IndexedDB pre veľké množiny štruktúrovaných údajov, ktoré vyžadujú dopytovanie a filtrovanie.