Jak používat IndexedDB jako databázi

IndexedDB je databáze NoSQL na straně klienta, která vám umožňuje ukládat a získávat strukturovaná data ve webovém prohlížeči uživatele.

IndexedDB poskytuje několik výhod, jako je větší paměť a offline ukládání a načítání dat oproti jiným možnostem úložiště, jako je localStorage. Zde se dozvíte, jak používat IndexedDB jako databázi.

Nastavení vaší databáze

Chcete-li vytvořit databázi, musíte vytvořit otevřený požadavek pomocí IndexedDB's OTEVŘENO metoda. The OTEVŘENO metoda vrací an IDBOpenDBRequest objekt. Tento objekt poskytuje přístup k úspěch, chyba, a nutná aktualizaceemitované události z otevřeného provozu.

The OTEVŘENO metoda přebírá dva argumenty: název a volitelné číslo verze. Argument name představuje název vaší databáze. Číslo verze určuje verzi databáze, se kterou vaše aplikace očekává práci. Výchozí hodnota je nula.

Zde je návod, jak vytvořit otevřenou žádost:

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

Po vytvoření otevřené žádosti musíte poslouchat a zvládnout události na vráceném předmětu.

The úspěch událost nastane, když úspěšně vytvoříte databázi. Po odeslání získáte přístup ke svému databázovému objektu prostřednictvím událost.cíl.výsledek:

openRequest.onsuccess = funkce (událost) {
konst db = event.target.result;
řídicí panel.log("Databáze vytvořena", db);
};

Výše uvedený příklad zpracovává událost úspěchu protokolováním databázového objektu.

The chyba k události dojde, pokud IndexedDB narazí na problém při vytváření databáze. Můžete to vyřešit zalogováním chyby do konzole nebo pomocí jiného metody zpracování chyb:

openRequest.onerror = funkce (událost) {
// ...
};

The nutná aktualizace událost nastane, když vytvoříte databázi poprvé nebo když aktualizujete její verzi. Spustí se pouze jednou, takže je ideálním místem pro vytvoření úložiště objektů.

Vytvoření úložiště objektů

Úložiště objektů je podobné tabulce v relačních databázích na straně serveru. K ukládání párů klíč–hodnota můžete použít úložiště objektů.

Měli byste vytvořit úložiště objektů jako odpověď na nutná aktualizace událost. Tato událost se spustí, když vytvoříte novou verzi databáze nebo upgradujete stávající verzi. Tím je zajištěno, že databáze je správně nakonfigurována a aktuální, než přidáte jakákoli data.

Úložiště objektů můžete vytvořit pomocí createObjectStore metodu, ke které máte přístup na základě reference vaší databáze. Tato metoda bere jako argumenty název úložiště objektů a konfigurační objekt.

V konfiguračním objektu musíte definovat primární klíč. Primární klíč můžete definovat definováním cesty klíče, což je vlastnost, která vždy existuje a obsahuje jedinečnou hodnotu. Případně můžete použít generátor klíčů nastavením keyPath majetek do „id“ a autoIncrement majetek do skutečný ve vašem konfiguračním objektu.

Například:

openRequest.onupgradeneeded = funkce (událost) {
konst db = event.target.result;
// Vytvoří úložiště objektů
konst userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 autoIncrement: skutečný,
 });
}

Tento příklad vytvoří ve vaší databázi úložiště objektů s názvem „userStore“ a nastaví jeho primární klíč na automaticky se zvyšující id.

Definování indexů

V IndexedDB je index způsob, jak efektivněji organizovat a načítat data. To vám umožní prohledávat úložiště objektů a třídit je na základě indexovaných vlastností.

Chcete-li definovat index na úložišti objektů, použijte createIndex() metoda objektu úložiště objektů. Tato metoda bere jako argumenty název indexu, název vlastnosti a konfigurační objekt:

userObjectStore.createIndex("název", "název", { unikátní: Nepravdivé });
userObjectStore.createIndex("e-mailem", "e-mailem", { unikátní: skutečný });

Tento blok kódu výše definuje dva indexy, "jméno" a "e-mail" na userObjectStore. Index "name" není jedinečný, což znamená, že více objektů může mít stejnou hodnotu názvu, zatímco index "email" je jedinečný, což zajišťuje, že žádné dva objekty nemohou mít stejnou hodnotu e-mailu.

Zde je úplný příklad toho, jak můžete zvládnout nutná aktualizace událost:

openRequest.onupgradeneeded = funkce (událost) {
konst db = event.target.result;
// Vytvoří úložiště objektů
konst userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 autoIncrement: skutečný,
 }); 
// Vytvořte indexy
 userObjectStore.createIndex("název", "název", { unikátní: Nepravdivé });
 userObjectStore.createIndex("e-mailem", "e-mailem", { unikátní: skutečný });
};

Přidávání dat do IndexedDB

Transakce v IndexedDB je způsob, jak seskupit více operací čtení a zápisu do jediné operace. Aby byla zajištěna konzistence a integrita dat, pokud jedna z operací v rámci transakce selže, IndexedDB vrátí všechny operace zpět.

Chcete-li přidat data do databáze IndexedDB, musíte vytvořit transakci v úložišti objektů, do kterého chcete přidat data, a poté použít přidat() způsob na transakci pro přidání dat.

Transakci můžete vytvořit zavoláním na transakce metoda na vašem databázovém objektu. Tato metoda vyžaduje dva argumenty: Název (názvy) vašeho datového úložiště a režim transakce, který může být pouze ke čtení (výchozí) nebo číst psát.

Poté zavolejte na objectStore() metodu na transakci a předejte název úložiště objektů, do kterého chcete přidat data. Tato metoda vrací odkaz na úložiště objektů.

Nakonec zavolejte na přidat() metoda v úložišti objektů a předejte data, která chcete přidat:

konst addUserData = (userData, db) => {
// Otevření transakce
konst transakce = db.transaction("userStore", "číst psát");
// Přidání dat do úložiště objektů
konst userObjectStore = transakce.objectStore("userStore");
// Vytvořte požadavek na přidání userData
konst request = userObjectStore.add (userData);
// Zpracování úspěšné události
 žádost.úspěch = funkce (událost) {
//...
 };
// Ošetření chyby
 request.onerror = funkce (událost) {
//...
 };
};

Tato funkce vytvoří transakci s objektovým úložištěm "userStore" a nastaví režim na "readwrite". Poté získá úložiště objektů a přidá uživatelská data k tomu pomocí přidat metoda.

Načítání dat z IndexedDB

Chcete-li načíst data z databáze IndexedDB, musíte vytvořit transakci v úložišti objektů, ze kterého chcete data načíst, a poté použít dostat() nebo dostat všechny() metoda na transakci k načtení dat v závislosti na množství dat, které chcete načíst.

The dostat() metoda převezme hodnotu primárního klíče objektu, který chcete načíst, a vrátí objekt s odpovídajícím klíčem z vašeho úložiště objektů.

The dostat všechny() metoda vrací všechna data v úložišti objektů. Vezme také volitelné omezení jako argument a vrátí všechna odpovídající data z úložiště.

konst getUserData = (id, db) => {
konst transakce = db.transaction("userStore", "pouze ke čtení");
konst userObjectStore = transakce.objectStore("userStore");
// Vytvořte požadavek na získání dat
konst request = userObjectStore.get (id);
 žádost.úspěch = funkce (událost) {
řídicí panel.log (request.result);
 };
 request.onerror = funkce (událost) {
// Chyba zpracování
 };
};

Tato funkce vytvoří transakci s úložištěm objektů „userStore“ a nastaví režim na „pouze pro čtení“. Poté načte uživatelská data s odpovídajícím ID z úložiště objektů.

Aktualizace dat pomocí IndexedDB

Chcete-li aktualizovat data v IndexedDB, musíte vytvořit transakci v režimu „čtení a zápisu“. Pokračujte načtením objektu, který chcete aktualizovat, pomocí dostat() metoda. Poté upravte objekt a zavolejte dát() metoda na úložišti objektů k uložení aktualizovaného objektu zpět do databáze.

konst updateUserData = (id, userData, db) => {
konst transakce = db.transaction("userStore", "číst psát");
konst userObjectStore = transakce.objectStore("userStore");
// Vytvořte požadavek na získání dat
konst getRequest = userObjectStore.get (id);
// Zpracování úspěšné události
 getRequest.onsuccess = funkce (událost) {
// Získejte stará uživatelská data
konst uživatel = event.target.result;
// Aktualizace uživatelských dat
 user.name = userData.name;
 user.email = userData.email;
// Vytvořte požadavek na aktualizaci dat
konst putRequest = userObjectStore.put (uživatel);
 putRequest.onsuccess = funkce (událost) {
// Zvládněte úspěch
 };
 putRequest.onerror = funkce (událost) {
// Chyba zpracování
 };
 };
 getRequest.onerror = funkce (událost) {
// Chyba zpracování
 };
};

Tato funkce vytvoří transakci pro získání a aktualizaci dat vaší databáze.

Odstranění dat z IndexedDB

Chcete-li smazat data z IndexedDB, musíte vytvořit transakci v režimu „čtení zápisu“. Pak zavolejte na vymazat() metoda v úložišti objektů k odstranění objektu z databáze:

konst deleteUserData = (id, db) => {
konst transakce = db.transaction("userStore", "číst psát");
konst userObjectStore = transakce.objectStore("userStore");
// Požádejte o smazání dat
konst request = userObjectStore.delete (id);
 žádost.úspěch = funkce (událost) {
// Zvládněte úspěch
 };
 request.onerror = funkce (událost) {
// Chyba zpracování
 };
};

Tato funkce vytvoří transakci, která odstraní data s odpovídajícím ID z vašeho úložiště objektů.

Měli byste používat IndexedDB nebo localStorage?

Volba mezi IndexedDB a dalšími databázemi na straně klienta, jako je localStorage, závisí na požadavcích vaší aplikace. Použijte localStorage pro jednoduché ukládání malého množství dat. Vyberte IndexedDB pro velké sady strukturovaných dat vyžadující dotazování a filtrování.