HTML - IndexedDB: Your Personal Database in the Browser

Hai, bakat web developer masa depan! Hari ini, kita akan melihat dunia yang menarik IndexedDB. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu anda dalam perjalanan ini, bahkan jika anda belum pernah menulis satu baris kod sebelum ini. Jadi, ambil topi keras maya anda, dan mari kita mulakan bangunan!

HTML - IndexedDB

Apa Itu IndexedDB?

IndexedDB adalah seperti sebuah pangkalan data kecil yang tinggal di dalam browser web anda. Bayangkan memiliki lemari berfail kecil di dalam komputer anda yang dapat menyimpan dan mengatur semua jenis maklumat untuk aplikasi web anda. Menarik, kan?

Mengapa Menggunakan IndexedDB?

Anda mungkin bertanya-tanya, "Mengapa kita perlu cara lain untuk menyimpan data?" Biar saya ceritakan sedikit kisah. Pada zaman dahulu, kita bergantung kepada cookie dan penyimpanan tempatan untuk menyimpan data di dalam browser. Tetapi mereka seperti mencuba menempatkan gajah ke dalam kotak api - terbatas dan tidak fleksibel.

Berikut adalah sebab mengapa IndexedDB adalah superhero penyimpanan browser:

Ciri	Deskripsi
Kapasiti Penyimpanan	Dapat menyimpan lebih banyak data daripada cookie atau penyimpanan tempatan
Jenis Data	Menyokong jenis data berbeza, termasuk fail dan blob
Pengindeksan	Membolehkan carian pantas melalui data anda
Transaksi	Menjamin keselamatan data dengan operasi berdasarkan transaksi
Asinkron	Tidak membekukan aplikasi anda saat bekerja dengan data

Membiasakan Diri dengan IndexedDB

Ayo roll up sarung tangan kita dan mulai dengan sedikit kod. Jangan bimbang jika ia nampak menakutkan pada permulaan - kita akan pecahkan ia secara berperingkat.

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

request.onerror = function(event) {
console.error("Ralat pangkalan data: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("Pangkalan data berjaya dibuka");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("Simpanan objek dicipta");
};

Wah! Itu banyak untuk diambil, kan? Mari kita pecahkan ia:

Kita mulai dengan mendeklarasikan variabel db untuk menyimpan sambungan pangkalan data kita.
Kita menggunakan indexedDB.open() untuk membuka (atau membuat) pangkalan data bernama "MyFirstDatabase".
Kita susun tiga penangan peristiwa:

onerror: Ini akan dijalankan jika ada sesuatu yang salah.
onsuccess: Ini akan dijalankan saat pangkalan data berjaya dibuka.
onupgradeneeded: Ini akan dijalankan saat pangkalan data dicipta atau dinaikkan taraf.

Pandang onupgradeneeded seperti arsitek pangkalan data. Itu di mana kita merancang struktur pangkalan data kita.

Menambah Data ke IndexedDB

Sekarang kita sudah punya pangkalan data, mari kita tambahkan sedikit data kepadanya. Bayangkan kita membuat sistem pengurusan pelajar.

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("Ralat menambah pelajar: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Pelajar berjaya ditambah");
};
}

// Penggunaan
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

Ini adalah apa yang berlaku:

Kita membuat transaksi - anggap itu seperti lubang selamat untuk data kita.
Kita mendapatkan simpanan objek (seperti tabel dalam pangkalan data tradisional).
Kita menggunakan add() untuk memasukkan data pelajar kita.
Kita susun penangan kejayaan dan ralat untuk mengetahui jika ia bekerja.

Mendapatkan Data dari IndexedDB

Apa guna data yang disimpan jika kita tidak dapat mengambilnya? Mari kita dapatkan data pelajar kita:

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Ralat mendapatkan pelajar: " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("Pelajar ditemui:", request.result);
} else {
console.log("Pelajar tidak ditemui");
}
};
}

// Penggunaan
getStudent(1);

Fungsi ini seperti seorang pustakawan mendapatkan buku untuk anda:

Kita mulai dengan membuat transaksi baca-saja (kita tidak mengubah apa-apa).
Kita menggunakan get() untuk mendapatkan pelajar berdasarkan ID mereka.
Jika kita menemui pelajar, kita logkan maklumat mereka; jika tidak, kita katakan mereka tidak ditemui.

Memperbaharui Data di IndexedDB

Pelajar meningkat, gred berubah. Mari kita perbaharui catatan kita:

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Ralat mendapatkan pelajar untuk perbaharui: " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("Ralat memperbaharui pelajar: " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("Pelajar berjaya diperbaharui");
};
};
}

// Penggunaan
updateStudent(1, "A+");

Fungsi ini seperti seorang guru memperbaharui buku gred:

Kita mendapatkan data pelajar semasa.
Kita ubah gred.
Kita menggunakan put() untuk menyimpan data yang diperbaharui kembali ke pangkalan data.

Menghapus Data dari IndexedDB

kadang-kadang, kita perlu menghapus data. Mari kita tambahkan fungsi untuk menghapus pelajar:

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("Ralat menghapus pelajar: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Pelajar berjaya dihapus");
};
}

// Penggunaan
deleteStudent(2);

Ini seperti menghapus entri daripada catatan pelajar kita:

Kita mulai dengan membuat transaksi "readwrite" kerana kita akan mengubah data.
Kita menggunakan metode delete() untuk menghapus pelajar berdasarkan ID mereka.
Kita penangan kejayaan dan ralat untuk mengetahui jika ia bekerja.

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dalam dunia IndexedDB. Kita telah meliputi pembuatan pangkalan data, menambah, mendapatkan, memperbaharui, dan menghapus data. Ini adalah operasi asas yang anda akan gunakan saat bekerja dengan IndexedDB.

Ingat, latihan membuat sempurna. Cobalah membuat projek kecil anda sendiri menggunakan IndexedDB. Mungkin saja aplikasi senarai tugasan atau catatan personal. Semakin anda bermain dengannya, semakin anda akan merasa nyaman.

IndexedDB mungkin nampak kompleks pada permulaan, tetapi ia adalah alat yang kuat yang dapat membawa aplikasi web anda ke tahap berikutnya. Itu seperti memiliki kekuatan super - kemampuan menyimpan dan mengelola jumlah besar data di dalam browser.

Terus mengoding, tetap curiga, dan jangan lupa untuk bersenang-senang dalam perjaluran ini! Siapa tahu? Aplikasi web besar berikutnya mungkin saja ada di ujung jari anda.

Credits: Image by storyset