JavaScript Academy · Pelajaran

Pemberian Versi dan Peningkatan

Migrasikan skema dengan perubahan versi.

Pemberian Versi dan Peningkatan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengapa Pemberian Versi?

Aplikasi terus berkembang: Anda menambahkan store, menambahkan indeks, atau mengubah bentuk data. IndexedDB menggunakan nomor versi untuk mengelola perubahan skema ini dengan aman di peramban setiap pengguna.

Nomor Versi

Argumen kedua untuk open adalah versi, berupa bilangan bulat positif. Menaikkannya memberi tahu peramban bahwa skema telah berubah dan memicu pemutakhiran.

// Bumping from 1 to 2 triggers onupgradeneeded:
const request = indexedDB.open('app-db', 2);

Pemutakhiran Hanya Bisa Menaikkan Versi

Anda hanya dapat menaikkan versi. Membuka dengan angka yang lebih rendah daripada versi yang tersimpan akan gagal dan menghasilkan error. Jangan pernah menurunkan versi.

// If the stored DB is version 3:
const req = indexedDB.open('app-db', 2);
req.onerror = () => console.log('cannot open older version');

oldVersion dan newVersion

Di dalam onupgradeneeded, event menyediakan oldVersion dan newVersion. Gunakan keduanya untuk menerapkan hanya migrasi yang belum dijalankan.

request.onupgradeneeded = (e) => {
  console.log('upgrading from', e.oldVersion, 'to', e.newVersion);
};

Migrasi Bertahap

Pola yang kuat adalah menggunakan alur berlanjut dengan oldVersion: setiap blok dibangun berdasarkan blok sebelumnya sehingga pengguna pada versi lama mana pun dapat mencapai skema terbaru.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 1) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
  if (e.oldVersion < 2) {
    db.createObjectStore('tags', { keyPath: 'name' });
  }
};

Menambahkan Indeks Nantinya

Untuk menambahkan indeks ke store yang sudah ada selama pemutakhiran, dapatkan store dari transaction pemutakhiran, lalu panggil createIndex di dalamnya.

request.onupgradeneeded = (e) => {
  if (e.oldVersion < 3) {
    const store = e.target.transaction.objectStore('notes');
    store.createIndex('byDate', 'createdAt');
  }
};

Transaction Perubahan Versi

Selama onupgradeneeded, transaction milik event merupakan transaction versionchange khusus. Hanya dalam konteks inilah pengeditan skema dan migrasi data dapat dilakukan bersamaan.

request.onupgradeneeded = (e) => {
  const tx = e.target.transaction; // versionchange tx
  const store = tx.objectStore('notes');
  // migrate existing records here if needed
};

Memigrasikan Data yang Sudah Ada

Jika perubahan skema memerlukan perubahan bentuk rekaman, lakukan iterasi pada store dengan kursor selama pemutakhiran, lalu gunakan put untuk menyimpan kembali nilai yang telah diubah.

const store = e.target.transaction.objectStore('notes');
store.openCursor().onsuccess = (ev) => {
  const cursor = ev.target.result;
  if (cursor) {
    const note = cursor.value;
    note.archived = false; // new field
    cursor.update(note);
    cursor.continue();
  }
};

Event versionchange

Ketika satu tab melakukan pemutakhiran, tab lain yang masih menggunakan versi lama menerima event versionchange pada db. Tab tersebut sebaiknya menutup koneksinya agar pemutakhiran tidak terhambat.

db.onversionchange = () => {
  db.close(); // let the other tab upgrade
  console.log('database is outdated, please reload');
};

Menghapus Store

Anda dapat menghapus store yang sudah tidak diperlukan selama pemutakhiran dengan db.deleteObjectStore(name). Tindakan ini menghapus store dan datanya secara permanen.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 4 && db.objectStoreNames.contains('temp')) {
    db.deleteObjectStore('temp');
  }
};

Praktik Terbaik Pemutakhiran

Pastikan migrasi bersifat idempoten dan diurutkan berdasarkan oldVersion, tutup koneksi lama saat terjadi versionchange, dan uji pemutakhiran dari setiap versi sebelumnya. Dengan demikian, data pengguna lama tetap utuh.

Uji Cepat

Ujilah pemahaman Anda tentang pemberian versi dan pemutakhiran.

Ringkasan

Anda telah mempelajari pemberian versi dan pemutakhiran:

Naikkan nomor versi untuk memicu onupgradeneeded.
Gunakan oldVersion untuk migrasi bertahap yang idempoten.
Transaction versionchange dalam pemutakhiran mengedit skema dan data.
Migrasikan rekaman dengan kursor dan cursor.update.
Tutup tab lama saat terjadi event versionchange.

Anda telah menyelesaikan IndexedDB. Selanjutnya, Pekerja Layanan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemberian Versi dan Peningkatan” gratis?

Ya — teks lengkap “Pemberian Versi dan Peningkatan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemberian Versi dan Peningkatan”?

Migrasikan skema dengan perubahan versi. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pemberian Versi dan Peningkatan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy