HTML - IndexedDB: Database Pribadi Anda di Browser

Halo, para pengembang web masa depan! Hari ini, kita akan meluncur ke dunia yang menarik dari IndexedDB. Sebagai guru komputer tetangga yang ramah, saya di sini untuk menghidahkan Anda dalam perjalanan ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Jadi, siapkan hardhat maya Anda, dan mari kita mulai bangun!

HTML - IndexedDB

Apa Itu IndexedDB?

IndexedDB adalah seperti database mini yang berada di dalam browser web Anda. Bayangkan Anda memiliki lemari filing kecil di komputernya yang dapat menyimpan dan mengatur semua jenis informasi untuk aplikasi web Anda. Menarik, kan?

Mengapa Menggunakan IndexedDB?

Anda mungkin berpikir, "Mengapa kita butuh cara lain untuk menyimpan data?" Biar saya ceritakan kecil. Pada zaman dulu, kita mengandalkan cookies dan penyimpanan lokal untuk menyimpan data di browser. Tetapi mereka seperti mencoba memasukkan gajah ke dalam kotak api - terbatas dan tidak terlalu fleksibel.

Ini adalah mengapa IndexedDB adalah superhero penyimpanan browser:

Fitur	Deskripsi
Kapasitas Penyimpanan	Dapat menyimpan lebih banyak data daripada cookies atau penyimpanan lokal
Tipe Data	Mendukung berbagai jenis data, termasuk file dan blob
Pengindeksan	Memungkinkan pencarian cepat melalui data Anda
Transaksi	Mengjamin integritas data dengan operasi berdasarkan transaksi
Asinkron	Tidak membekukan aplikasi Anda saat bekerja dengan data

Memulai Dengan IndexedDB

mari kita merenggangkan lengan dan mulai dengan beberapa kode. Jangan khawatir jika itu terlihat menakutkan pertama kali - kita akan memecahnya step per step.

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

request.onerror = function(event) {
console.error("Error database: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("Database terbuka dengan sukses");
};

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

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

Kita mulai dengan mendeklarasikan variabel db untuk menahan koneksi database kita.
Kita gunakan indexedDB.open() untuk membuka (atau membuat) database bernama "MyFirstDatabase".
Kita mengatur tiga pengобрабтник peristiwa:

onerror: Ini akan berjalan jika ada yang salah.
onsuccess: Ini akan berjalan saat database terbuka dengan sukses.
onupgradeneeded: Ini akan berjalan saat database dibuat atau ditingkatkan.

Pertimbangkan onupgradeneeded sebagai arsitek database. Itu adalah tempat kita merancang struktur database kita.

Menambahkan Data ke IndexedDB

Sekarang kita sudah mengatur database kita, mari kita menambahkan beberapa data ke dalamnya. Bayangkan kita membuat sistem manajemen siswa.

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("Error menambahkan siswa: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Siswa ditambahkan dengan sukses");
};
}

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

Ini adalah apa yang terjadi:

Kita membuat sebuah transaksi - pikirkan itu seperti tunnel aman untuk data kita.
Kita mendapatkan object store (seperti tabel dalam database tradisional).
Kita menggunakan add() untuk memasukkan data siswa kita.
Kita mengatur pengобрабтник kesuksesan dan kesalahan untuk mengetahui jika itu bekerja.

Mengambil Data dari IndexedDB

Apa gunanya data yang disimpan jika kita tidak dapat mengambilnya? Mari kitaambil data siswa 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("Error mengambil siswa: " + event.target.error);
};

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

// Penggunaan
getStudent(1);

Fungsi ini seperti seorang pustakawan mengambil buku untuk Anda:

Kita mulai dengan transaksi read-only (kita tidak mengubah apa-apa).
Kita menggunakan get() untuk mengambil siswa berdasarkan ID-nya.
Jika kita menemukan siswa, kita catat detilnya; jika tidak, kita katakan bahwa mereka tidak ditemukan.

Memperbarui Data di IndexedDB

Siswa meningkat, nilai berubah. Mari kita perbarui 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("Error mengambil siswa untuk perbarui: " + 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("Error memperbarui siswa: " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("Siswa diperbarui dengan sukses");
};
};
}

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

Fungsi ini seperti seorang guru memperbarui buku nilai:

Kita fetch data siswa saat ini.
Kita modifikasi nilai.
Kita menggunakan put() untuk menyimpan data yang diperbarui kembali ke database.

Menghapus Data dari IndexedDB

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

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("Error menghapus siswa: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Siswa dihapus dengan sukses");
};
}

// Penggunaan
deleteStudent(2);

Ini seperti menghapus entri dari catatan siswa kita:

Kita mulai dengan transaksi "readwrite" karena kita sedang memodifikasi data.
Kita menggunakan metode delete() untuk menghapus siswa berdasarkan ID-nya.
Kita menangani kasus kesuksesan dan kesalahan untuk mengetahui jika itu bekerja.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia IndexedDB. Kita telah menyoroti membuat database, menambahkan, mengambil, memperbarui, dan menghapus data. Ini adalah operasi fundamental yang Anda akan gunakan saat bekerja dengan IndexedDB.

Ingat, latihan membuat sempurna. Cobalah membuat proyek kecil Anda sendiri menggunakan IndexedDB. Mungkin aplikasi daftar tugas atau catatan pribadi. Semakin Anda bermain dengannya, semakin Anda merasakan kenyamanannya.

IndexedDB mungkin terlihat kompleks pada awalnya, tetapi itu adalah alat yang kuat yang dapat membawa aplikasi web Anda ke level berikutnya. Itu seperti memiliki kekuatan super - kemampuan untuk menyimpan dan mengelola banyak data di dalam browser.

Tetap mengoding, tetap curiga, dan jangan lupa untuk bersenang-senang dalam perjalanan! Siapa tahu? Aplikasi web besar berikutnya mungkin hanya di jari Anda.

Credits: Image by storyset

Tutorial Sebelumnya:

HTML - Mikrodata

Tutorial Selanjutnya:

HTML - Pesan Web