Jak używać IndexedDB jako bazy danych

IndexedDB to działająca po stronie klienta baza danych NoSQL, która umożliwia przechowywanie i pobieranie danych strukturalnych w przeglądarce internetowej użytkownika.

IndexedDB zapewnia kilka zalet, takich jak większa pamięć oraz przechowywanie i pobieranie danych w trybie offline w porównaniu z innymi opcjami przechowywania, takimi jak localStorage. Tutaj dowiesz się, jak używać IndexedDB jako bazy danych.

Konfiguracja Twojej bazy danych

Aby utworzyć bazę danych, musisz utworzyć otwarte żądanie za pomocą IndexedDB otwarty metoda. The otwarty metoda zwraca IDBOpenDBRequest obiekt. Ten obiekt zapewnia dostęp do powodzenie, błąd, I potrzebne uaktualnienieemitowane zdarzenia z operacji otwartej.

The otwarty Metoda przyjmuje dwa argumenty: nazwę i opcjonalny numer wersji. Argument name reprezentuje nazwę twojej bazy danych. Numer wersji określa wersję bazy danych, z którą aplikacja ma współpracować. Wartość domyślna to zero.

Oto jak utworzyć otwartą prośbę:

konst openRequest = indexedDB.open("baza danych użytkowników", 1);

Po utworzeniu otwartego żądania musisz słuchać i obsłużyć zdarzenia na zwracanym przedmiocie.

The powodzenie zdarzenie występuje po pomyślnym utworzeniu bazy danych. Po emisji uzyskujesz dostęp do obiektu bazy danych za pośrednictwem zdarzenie.cel.wynik:

openRequest.onsuccess = funkcjonować (wydarzenie) {
konst db = zdarzenie.cel.wynik;
konsola.dziennik(„Baza danych została utworzona”, db);
};

Powyższy przykład obsługuje zdarzenie sukcesu przez rejestrowanie obiektu bazy danych.

The błąd zdarzenie występuje, jeśli IndexedDB napotka problem podczas tworzenia bazy danych. Możesz sobie z tym poradzić, logując błąd do konsoli lub używając innych metody obsługi błędów:

openRequest.onerror = funkcjonować (wydarzenie) {
// ...
};

The potrzebne uaktualnienie zdarzenie występuje podczas tworzenia bazy danych po raz pierwszy lub podczas aktualizacji jej wersji. Odpala tylko raz, co czyni go idealnym miejscem do stworzenia sklepu z przedmiotami.

Tworzenie składnicy obiektów

Składnica obiektów jest podobna do tabeli w relacyjnych bazach danych po stronie serwera. Składnicy obiektów można używać do przechowywania par klucz-wartość.

Powinieneś utworzyć składnice obiektów w odpowiedzi na potrzebne uaktualnienie wydarzenie. To zdarzenie jest wyzwalane podczas tworzenia nowej wersji bazy danych lub uaktualniania istniejącej wersji. Dzięki temu baza danych jest poprawnie skonfigurowana i aktualna przed dodaniem jakichkolwiek danych.

Składnicę obiektów można utworzyć za pomocą utwórzObjectStore metoda, do której możesz uzyskać dostęp w odniesieniu do swojej bazy danych. Ta metoda przyjmuje nazwę składnicy obiektów i obiekt konfiguracji jako argumenty.

W obiekcie konfiguracyjnym należy zdefiniować klucz podstawowy. Klucz podstawowy można zdefiniować, definiując ścieżkę klucza, która jest właściwością, która zawsze istnieje i zawiera unikalną wartość. Alternatywnie możesz użyć generatora kluczy, ustawiając plik Ścieżka klucza właściwość do „ID” i autoprzyrost nieruchomość do PRAWDA w twoim obiekcie konfiguracyjnym.

Na przykład:

openRequest. onupgradepotrzebne = funkcjonować (wydarzenie) {
konst db = zdarzenie.cel.wynik;
// Utwórz składnicę obiektów
konst userObjectStore = db.createObjectStore(„Sklep użytkownika”, {
 Ścieżka klucza: "ID",
 autoPrzyrost: PRAWDA,
 });
}

Ten przykład tworzy składnicę obiektów o nazwie „userStore” w bazie danych i ustawia jej klucz podstawowy na automatycznie zwiększający się identyfikator.

Definiowanie indeksów

W IndexedDB indeks jest sposobem na wydajniejsze organizowanie i pobieranie danych. Umożliwia to przeszukiwanie składnicy obiektów i sortowanie jej na podstawie zindeksowanych właściwości.

Aby zdefiniować indeks w składnicy obiektów, użyj metody utwórzIndeks() metoda obiektu składnicy obiektów. Ta metoda przyjmuje jako argumenty nazwę indeksu, nazwę właściwości i obiekt konfiguracji:

userObjectStore.createIndex("nazwa", "nazwa", { unikalny: FAŁSZ });
userObjectStore.createIndex("e-mail", "e-mail", { unikalny: PRAWDA });

Powyższy blok kodu definiuje dwa indeksy, „nazwa” i „e-mail” w pliku userObjectStore. Indeks „nazwa” nie jest unikalny, co oznacza, że ​​wiele obiektów może mieć tę samą wartość nazwy, podczas gdy indeks „e-mail” jest unikalny, co gwarantuje, że żadne dwa obiekty nie mogą mieć tej samej wartości adresu e-mail.

Oto kompletny przykład tego, jak możesz obsłużyć plik potrzebne uaktualnienie wydarzenie:

openRequest. onupgradepotrzebne = funkcjonować (wydarzenie) {
konst db = zdarzenie.cel.wynik;
// Utwórz składnicę obiektów
konst userObjectStore = db.createObjectStore(„Sklep użytkownika”, {
 Ścieżka klucza: "ID",
 autoPrzyrost: PRAWDA,
 }); 
// Tworzenie indeksów
 userObjectStore.createIndex("nazwa", "nazwa", { unikalny: FAŁSZ });
 userObjectStore.createIndex("e-mail", "e-mail", { unikalny: PRAWDA });
};

Dodawanie danych do IndexedDB

Transakcja w IndexedDB to sposób na zgrupowanie wielu operacji odczytu i zapisu w jedną operację. Aby zapewnić spójność i integralność danych, jeśli jedna z operacji w ramach transakcji zakończy się niepowodzeniem, IndexedDB wycofuje wszystkie operacje.

Aby dodać dane do bazy danych IndexedDB, musisz utworzyć transakcję w składnicy obiektów, do której chcesz dodać dane, a następnie użyć dodać() metodę w transakcji, aby dodać dane.

Możesz utworzyć transakcję, dzwoniąc pod numer transakcja metoda na twoim obiekcie bazy danych. Ta metoda przyjmuje dwa argumenty: nazwę (nazwy) twojego magazynu danych i tryb transakcji, który może być tylko czytać (domyślnie) lub czytaj i pisz.

Następnie zadzwoń do tel obiektStore() metodę w transakcji i przekaż nazwę składnicy obiektów, do której chcesz dodać dane. Ta metoda zwraca odwołanie do składnicy obiektów.

Na koniec zadzwoń do tel dodać() metoda w magazynie obiektów i przekaż dane, które chcesz dodać:

konst dodajDaneUżytkownika = (dane użytkownika, db) => {
// Otwórz transakcję
konst transakcja = db.transakcja(„Sklep użytkownika”, „przeczytaj”);
// Dodaj dane do składnicy obiektów
konst userObjectStore = transakcja.objectStore(„Sklep użytkownika”);
// Złóż wniosek o dodanie danych użytkownika
konst żądanie = userObjectStore.add (dane użytkownika);
// Obsługa zdarzenia sukcesu
 żądanie.powodzenie = funkcjonować (wydarzenie) {
//...
 };
// Obsługa błędu
 żądanie.błąd = funkcjonować (wydarzenie) {
//...
 };
};

Ta funkcja tworzy transakcję ze składnicą obiektów „userStore” i ustawia tryb na „readwrite”. Następnie pobiera magazyn obiektów i dodaje dane użytkownika do tego za pomocą dodać metoda.

Pobieranie danych z IndexedDB

Aby pobrać dane z bazy danych IndexedDB, musisz utworzyć transakcję w składnicy obiektów, z której chcesz pobrać dane, a następnie użyć Dostawać() Lub pobierz wszystko() sposób w transakcji pobierania danych w zależności od ilości danych, które chcesz pobrać.

The Dostawać() Metoda przyjmuje wartość klucza podstawowego obiektu, który chcesz pobrać, i zwraca obiekt z odpowiednim kluczem ze składnicy obiektów.

The pobierz wszystko() Metoda zwraca wszystkie dane w składnicy obiektów. Jako argument przyjmuje również opcjonalne ograniczenie i zwraca wszystkie pasujące dane ze sklepu.

konst pobierzDaneUżytkownika = (identyfikator, db) => {
konst transakcja = db.transakcja(„Sklep użytkownika”, "tylko czytać");
konst userObjectStore = transakcja.objectStore(„Sklep użytkownika”);
// Złóż wniosek o pobranie danych
konst żądanie = userObjectStore.get (identyfikator);
 żądanie.powodzenie = funkcjonować (wydarzenie) {
konsola.log (żądanie.wynik);
 };
 żądanie.błąd = funkcjonować (wydarzenie) {
// Błąd obsługi
 };
};

Ta funkcja tworzy transakcję ze składnicą obiektów „userStore” i ustawia tryb na „tylko do odczytu”. Następnie pobiera dane użytkownika z pasującym identyfikatorem ze składnicy obiektów.

Aktualizowanie danych za pomocą IndexedDB

Aby zaktualizować dane w IndexedDB, należy utworzyć transakcję z trybem „readwrite”. Kontynuuj, pobierając obiekt, który chcesz zaktualizować, używając Dostawać() metoda. Następnie zmodyfikuj obiekt i wywołaj metodę umieścić() metodę w składnicy obiektów, aby zapisać zaktualizowany obiekt z powrotem w bazie danych.

konst aktualizujDaneUżytkownika = (identyfikator, dane użytkownika, db) => {
konst transakcja = db.transakcja(„Sklep użytkownika”, „przeczytaj”);
konst userObjectStore = transakcja.objectStore(„Sklep użytkownika”);
// Złóż wniosek o pobranie danych
konst getRequest = userObjectStore.get (identyfikator);
// Obsługa zdarzenia sukcesu
 getRequest.onsuccess = funkcjonować (wydarzenie) {
// Pobierz stare dane użytkownika
konst użytkownik = zdarzenie.cel.wynik;
// Zaktualizuj dane użytkownika
 nazwa.użytkownika = nazwa.danych użytkownika;
 e-mail użytkownika = e-mail danych użytkownika;
// Złóż wniosek o aktualizację danych
konst putRequest = userObjectStore.put (użytkownik);
 putRequest.onsuccess = funkcjonować (wydarzenie) {
// Obsługa sukcesu
 };
 putRequest.onerror = funkcjonować (wydarzenie) {
// Błąd obsługi
 };
 };
 getRequest.onerror = funkcjonować (wydarzenie) {
// Błąd obsługi
 };
};

Ta funkcja tworzy transakcję w celu pobrania i zaktualizowania danych bazy danych.

Usuwanie danych z IndexedDB

Aby usunąć dane z IndexedDB, należy utworzyć transakcję z trybem „readwrite”. Następnie zadzwoń do usuwać() metoda w magazynie obiektów, aby usunąć obiekt z bazy danych:

konst usuń dane użytkownika = (identyfikator, db) => {
konst transakcja = db.transakcja(„Sklep użytkownika”, „przeczytaj”);
konst userObjectStore = transakcja.objectStore(„Sklep użytkownika”);
// Złóż wniosek o usunięcie danych
konst żądanie = userObjectStore.delete (identyfikator);
 żądanie.powodzenie = funkcjonować (wydarzenie) {
// Obsługa sukcesu
 };
 żądanie.błąd = funkcjonować (wydarzenie) {
// Błąd obsługi
 };
};

Ta funkcja tworzy transakcję, która usuwa dane o odpowiednim identyfikatorze ze składnicy obiektów.

Czy powinieneś używać IndexedDB czy localStorage?

Wybór między IndexedDB a innymi bazami danych po stronie klienta, takimi jak localStorage, zależy od wymagań Twojej aplikacji. Użyj localStorage do prostego przechowywania niewielkich ilości danych. Wybierz IndexedDB w przypadku dużych zestawów danych strukturalnych wymagających wykonywania zapytań i filtrowania.