Czym jest IndexedDB w JavaScript?

By /

JavaScript

IndexedDB jest niskopoziomowym API do zarządzania bazą danych w przeglądarce, które umożliwia przechowywanie i odczyt dużych ilości danych strukturalnych, w tym plików/blobs. Jest to system bazodanowy typu NoSQL, który umożliwia przechowywanie obiektów indeksowanych po kluczach. IndexedDB jest idealne do tworzenia aplikacji, które działają offline, przechowując dane lokalnie w przeglądarce użytkownika.

Przykład użycia IndexedDB

W tym przykładzie pokażemy, jak utworzyć prostą bazę danych IndexedDB do przechowywania informacji o książkach. Będziemy tworzyć bazę danych, dodawać do niej dane i odczytywać dane.

Krok 1: Tworzenie bazy danych IndexedDB

Najpierw utworzymy bazę danych IndexedDB i obiekt store dla przechowywania informacji o książkach.

// Utworzenie bazy danych IndexedDB
let db;
const request = window.indexedDB.open("LibraryDB", 1);

request.onerror = function(event) {
    console.error("Database error: ", event.target.errorCode);
};

request.onsuccess = function(event) {
    db = event.target.result;
    console.log("Database opened successfully");
};

// Uaktualnienie schematu bazy danych
request.onupgradeneeded = function(event) {
    db = event.target.result;
    const objectStore = db.createObjectStore("books", { keyPath: "id" });
    objectStore.createIndex("title", "title", { unique: false });
    console.log("Object store and indexes created");
};
Krok 2: Dodawanie danych do bazy danych

Następnie dodamy kilka książek do naszej bazy danych IndexedDB.

// Dodawanie książek do bazy danych
function addBooks() {
    const transaction = db.transaction(["books"], "readwrite");
    const store = transaction.objectStore("books");

    const books = [
        { id: 1, title: "JavaScript: The Good Parts",
                author: "Douglas Crockford" },
        { id: 2, title: "You Don't Know JS", author: "Kyle Simpson" }
    ];

    books.forEach((book) => {
        const request = store.add(book);
        request.onsuccess = function() {
            console.log("Book added to the database", book);
        };
    });
}
Krok 3: Odczytywanie danych z bazy danych

Na koniec pokażemy, jak odczytać dane z naszej bazy danych IndexedDB.

// Odczytywanie książek z bazy danych
function readBooks() {
    const transaction = db.transaction(["books"]);
    const store = transaction.objectStore("books");
    const request = store.get(1);

    request.onsuccess = function() {
        console.log("Reading book: ", request.result);
    };
}
Prosty HTML do interakcji z bazą danych
<!DOCTYPE html>
<html>
<head>
    <title>IndexedDB Example</title>
</head>
<body>
    <button onclick="addBooks()">Dodaj książki</button>
    <button onclick="readBooks()">Czytaj książki</button>

    <script src="app.js"></script>
</body>
</html>

Podsumowanie

IndexedDB jest potężnym narzędziem do przechowywania danych w przeglądarce, umożliwiającym tworzenie zaawansowanych aplikacji webowych, które mogą działać offline. Dzięki asynchronicznemu API, IndexedDB doskonale nadaje się do przechowywania dużych ilości danych strukturalnych bez wpływu na wydajność aplikacji. Przykład, który przedstawiliśmy, pokazuje podstawy pracy z IndexedDB, w tym tworzenie bazy danych, dodawanie i odczytywanie danych. Jest to fundament, na którym można budować bardziej złożone aplikacje wykorzystujące lokalne przechowywanie danych.

 

Powiązane artykuły

Scroll to Top