JavaScript Academy · Lekcja

Otwieranie bazy danych

Proszę tworzyć bazy danych i magazyny obiektów.

Otwieranie bazy danych to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest IndexedDB

IndexedDB to wbudowana w przeglądarkę baza danych o dużej pojemności, obsługująca transakcje. W przeciwieństwie do localStorage (małego, przechowującego wyłącznie ciągi znaków i synchronicznego), przechowuje ustrukturyzowane obiekty, obsługuje indeksy i działa asynchronicznie.

Otwieranie bazy danych

Bazę danych otwiera się (lub tworzy) za pomocą indexedDB.open(name, version). Metoda zwraca obiekt żądania, którego zdarzenia informują o powodzeniu lub niepowodzeniu.

const request = indexedDB.open('notes-db', 1);

Zdarzenia żądania

Otwarcie żądania wywołuje zdarzenia, które należy obsłużyć:

onsuccess — baza danych jest gotowa
onerror — otwieranie nie powiodło się
onupgradeneeded — należy utworzyć lub zaktualizować schemat

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

onupgradeneeded

onupgradeneeded uruchamia się przy pierwszym utworzeniu bazy danych lub po zwiększeniu jej numeru wersji. To jedyne miejsce, w którym można zmieniać schemat (tworzyć lub usuwać magazyny obiektów i indeksy).

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

Magazyny obiektów

Magazyn obiektów przypomina tabelę: jest kontenerem rekordów. Tworzy się go za pomocą db.createObjectStore(name, options) wewnątrz onupgradeneeded.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

Właściwość keyPath

keyPath wskazuje IndexedDB, która właściwość każdego obiektu jest jego kluczem głównym. Przechowywane obiekty muszą mieć tę właściwość, a klucze muszą być unikalne.

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

Klucze automatycznie inkrementowane

Jeśli obiekty nie mają naturalnego klucza, można pozwolić IndexedDB wygenerować go za pomocą autoIncrement: true. Każdy nowy rekord otrzyma następną liczbę całkowitą.

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

Sprawdzanie istniejących magazynów

Ponieważ onupgradeneeded uruchamia się przy każdym zwiększeniu wersji, tworzenie należy warunkować sprawdzeniem za pomocą db.objectStoreNames.contains, aby uniknąć błędów przy ponownym uruchomieniu.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

Przechowywanie odwołania db

Obiekt bazy danych z onsuccess należy zapisać, aby można było używać go podczas późniejszych operacji. Wszystkie odczyty i zapisy odbywają się za pośrednictwem tej instancji db.

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

Obsługa zablokowanych otwarć

Jeśli inna karta ma otwartą starszą wersję, aktualizacja może zostać blocked. Należy nasłuchiwać onblocked i poprosić użytkownika o zamknięcie innych kart.

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

Przebieg otwierania

Otwieranie IndexedDB: należy wywołać open z nazwą i wersją, utworzyć schemat w onupgradeneeded, a następnie pobrać db w onsuccess. Od tego momentu można wykonywać transakcje w celu odczytywania i zapisywania danych.

Szybki test

Proszę sprawdzić, czy rozumieją Państwo proces otwierania bazy danych.

Podsumowanie

Poznali Państwo sposób otwierania bazy danych IndexedDB:

indexedDB.open(name, version) zwraca żądanie.
Magazyny obiektów należy tworzyć wyłącznie w onupgradeneeded.
keyPath ustawia klucz główny, a autoIncrement generuje klucze.
Obiekt db z onsuccess należy zapisać do późniejszego użycia.
Należy obsługiwać onerror i onblocked.

Następnie omówimy transakcje i operacje CRUD.

Często zadawane pytania

Czy lekcja „Otwieranie bazy danych” jest bezpłatna?

Tak — pełny tekst „Otwieranie bazy danych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Otwieranie bazy danych”?

Proszę tworzyć bazy danych i magazyny obiektów. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Otwieranie bazy danych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy