IndexedDB

IndexedDB jest niskopoziomowym API dla klienta przeglądarki, które umożliwia przechowywanie i odczyt dużych ilości danych strukturalnych, w tym plików/bloków danych. Jest to system bazodanowy, który pozwala na tworzenie, odczyt, modyfikację i usuwanie danych z bazy danych bezpośrednio w przeglądarce. IndexedDB jest idealny do tworzenia aplikacji, które działają offline, przechowując dane lokalnie w przeglądarce użytkownika.

Przykład użycia IndexedDB

Poniżej znajduje się przykład prostego kodu HTML5 z JavaScriptem, demonstrujący podstawowe operacje na bazie danych IndexedDB, takie jak tworzenie bazy danych, dodawanie, odczytywanie, aktualizacja i usuwanie danych.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IndexedDB w HTML5</title>
</head>
<body>
    <h3>Przykład użycia IndexedDB</h3>
    <button id="createBtn">Utwórz bazę danych</button>
    <button id="addBtn">Dodaj dane</button>
    <button id="readBtn">Odczytaj dane</button>
    <button id="updateBtn">Aktualizuj dane</button>
    <button id="deleteBtn">Usuń dane</button>

    <script>
        // Sprawdzenie, czy IndexedDB jest wspierane
        if (!window.indexedDB) {
            console.log("Twoja przeglądarka nie wspiera IndexedDB");
            return;
        }

        let db;
        const request = indexedDB.open("MojaBazaDanych", 1);

        // Obsługa zdarzeń dla tworzenia lub aktualizacji bazy danych
        request.onupgradeneeded = function(event) {
            db = event.target.result;

            // Tworzenie objectStore dla tej bazy danych
            const objectStore = db.createObjectStore("osoby", { keyPath: "id" });

            // Definicja indeksów
            objectStore.createIndex("nazwisko", "nazwisko", { unique: false });
            objectStore.createIndex("email", "email", { unique: true });

            console.log("ObjectStore osoby utworzony.");
        };

        // Obsługa błędów
        request.onerror = function(event) {
            console.error("Database error: ", event.target.error);
        };

        // Dodawanie danych do bazy
        document.getElementById("addBtn").addEventListener("click", () => {
            const transaction = db.transaction(["osoby"], "readwrite");
            const objectStore = transaction.objectStore("osoby");

            const osoba = { id: "1", nazwisko: "Kowalski", email: "kowalski@example.com" };
            const request = objectStore.add(osoba);

            request.onsuccess = function(event) {
                console.log("Osoba została dodana do bazy danych.");
            };

            request.onerror = function(event) {
                console.error("Nie udało się dodać osoby: ", event.target.error);
            };
        });

        // Odczytywanie danych z bazy
        document.getElementById("readBtn").addEventListener("click", () => {
            const transaction = db.transaction(["osoby"]);
            const objectStore = transaction.objectStore("osoby");
            const request = objectStore.get("1");

            request.onsuccess = function(event) {
                if (request.result) {
                    console.log("Odczytano: ", request.result);
                } else {
                    console.log("Nie znaleziono osoby.");
                }
            };
        });

        // Aktualizacja danych w bazie
        document.getElementById("updateBtn").addEventListener("click", () => {
            const transaction = db.transaction(["osoby"], "readwrite");
            const objectStore = transaction.objectStore("osoby");

            const osoba = { id: "1", nazwisko: "Nowak", email: "nowak@example.com" };
            const request = objectStore.put(osoba);

            request.onsuccess = function(event) {
                console.log("Dane osoby zostały zaktualizowane.");
            };
        });

        // Usuwanie danych z bazy
        document.getElementById("deleteBtn").addEventListener("click", () => {
            const transaction = db.transaction(["osoby"], "readwrite");
            const objectStore = transaction.objectStore("osoby");
            const request = objectStore.delete("1");

            request.onsuccess = function(event) {
                console.log("Osoba została usunięta z bazy danych.");
            };
        });

        // Otwarcie bazy danych i ustawienie globalnej zmiennej `db`
        request.onsuccess = function(event) {
            db = event.target.result;
            console.log("Baza danych została otwarta pomyślnie.");
        };
    </script>
</body>
</html>

Opis

W powyższym przykładzie pokazano podstawowe operacje na IndexedDB, które są kluczowe dla zarządzania danymi w aplikacjach webowych. IndexedDB oferuje dużo większą elastyczność niż starsze rozwiązania, takie jak WebSQL czy localStorage, pozwalając na przechowywanie znacznie większych ilości danych, które mogą być strukturalnie złożone i wyszukiwane za pomocą indeksów.

  • Tworzenie bazy danych i object store: W przykładzie wykorzystano metodę indexedDB.open do utworzenia lub otwarcia bazy danych. Podczas pierwszego otwarcia bazy danych lub gdy jest potrzeba jej aktualizacji, wywoływane jest zdarzenie onupgradeneeded, w którym tworzony jest object store (magazyn obiektów) z kluczem głównym i indeksami.
  • Dodawanie danych: Użyto transakcji i object store do dodania obiektu do bazy danych. Każda operacja na danych wymaga utworzenia transakcji i określenia typu dostępu (np. “readwrite”).
  • Odczytywanie danych: Demonstruje odczytanie danych z bazy za pomocą klucza.
  • Aktualizacja danych: Podobnie jak przy dodawaniu, aktualizacja danych odbywa się przez utworzenie transakcji i wykorzystanie metody put, która aktualizuje dane, jeśli obiekt z danym kluczem już istnieje.
  • Usuwanie danych: Usunięcie danych z bazy danych wykorzystuje metodę delete na object store.

Podsumowanie

IndexedDB jest potężnym narzędziem w arsenale dewelopera front-end, umożliwiającym efektywne zarządzanie danymi w aplikacjach webowych, szczególnie tych, które wymagają pracy offline lub przechowywania dużych ilości danych. Dzięki asynchronicznemu API, IndexedDB jest dobrze przystosowane do nowoczesnych aplikacji internetowych, zapewniając płynną i wydajną obsługę danych bez blokowania interfejsu użytkownika. Przykład przedstawiony w tej lekcji to tylko wstęp do możliwości, jakie oferuje IndexedDB, zachęcamy do dalszego eksplorowania i eksperymentowania z tym potężnym API.

Poprzedni
Następny
Scroll to Top