JavaScript - IndexedDB: Portal Anda ke Penyimpanan Data Di Sisi Klien

Hai teman-teman yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik ke dunia IndexedDB. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk membimbing Anda melalui teknologi yang kuat ini yang mungkin akan revolusionerkan cara Anda berpikir tentang aplikasi web. Jadi, ambil minuman favorit Anda, duduk di kursi yang paling nyaman, dan mari kita masuk ke dalam!

Apa Itu IndexedDB?

IndexedDB adalah seperti database mini yang berada di dalam browser web Anda. Bayangkan Anda memiliki lemari arsip digital tempat Anda dapat menyimpan berbagai jenis informasi, dari teks sederhana hingga objek kompleks, gambar, bahkan file. Itu adalah IndexedDB untuk Anda!

Tapi ini yang menarik: tidak seperti database tradisional yang berada di server yang jauh, IndexedDB tinggal di perangkat pengguna. Ini berarti aplikasi web Anda dapat bekerja dengan data bahkan saat tidak ada koneksi internet. Bagus sekali, kan?

Fitur Utama IndexedDB

1. Alami Asinkron: Itu tidak akan membekukan aplikasi Anda saat bekerja dengan data.
2. Oriented Objek: Simpan objek JavaScript secara langsung, tanpa perlu konversi kompleks.
3. Kapasitas Data Besar: Simpan data jauh lebih banyak daripada opsi penyimpanan sisi klien lainnya.

Mengapa Menggunakan IndexedDB?

Sekarang, Anda mungkin berpikir, " Mengapa harus memesan IndexedDB saat saya memiliki opsi lain seperti localStorage?" Pertanyaan yang bagus! Biarkan saya menjelaskan dengan cerita pendek.

Bayangkan Anda sedang membuat aplikasi catatan. Dengan localStorage, Anda terbatas untuk menyimpan string sederhana. Itu seperti mencoba mengatur perpustakaan di mana setiap buku hanya dapat berisi satu kalimat. Tidak terlalu berguna, kan?

IndexedDB, di sisi lain, adalah seperti memiliki perpustakaan magis di mana setiap buku dapat berisi novel lengkap, gambar, bahkan video. Anda dapat mencari di perpustakaan ini sangat cepat, dan itu dapat menahan informasi jauh lebih banyak daripada rak biasa.

Berikut adalah beberapa alasan menarik untuk menggunakan IndexedDB:

1. Fungsionalitas Offline: Jadikan aplikasi Anda tetap berkerja bahkan tanpa koneksi internet.
2. Kinerja: Tangani jumlah besar data terstruktur secara efisien.
3. Struktur Data Kompleks: Simpan dan ambil kembali objek JavaScript dengan mudah.
4. Model Database Transaksional: Memastikan integritas data bahkan jika ada kesalahan.

Operasi CRUD

Sekarang, mari kita merusak tangan kita dengan beberapa kode! Dalam dunia database, kita sering membahas operasi CRUD. Tidak, itu bukan tentang membersihkan kotoran (meskipun itu dapat membantu dengan itu dalam data Anda). CRUD adalah singkatan dari Create, Read, Update, dan Delete. Ini adalah operasi fundamental yang Anda akan lakukan dengan IndexedDB.

Mari kita rincikan ini dengan beberapa contoh:

1. Create (Menambahkan Data)

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

request.onupgradeneeded = (event) => {
db = event.target.result;
const objectStore = db.createObjectStore("notes", { keyPath: "id", autoIncrement: true });
};

request.onsuccess = (event) => {
db = event.target.result;

const transaction = db.transaction(["notes"], "readwrite");
const objectStore = transaction.objectStore("notes");

const note = { title: "Catatan Pertama Saya", content: "Halo, IndexedDB!" };
const request = objectStore.add(note);

request.onsuccess = () => {
console.log("Catatan ditambahkan berhasil");
};
};

Dalam contoh ini, kita menciptakan database bernama "MyNotes" dan menambahkan catatan ke dalamnya. Bayangkan itu seperti menulis entri baru di日记mu.

2. Read (Mengambil Data)

const transaction = db.transaction(["notes"]);
const objectStore = transaction.objectStore("notes");
const request = objectStore.get(1);

request.onsuccess = (event) => {
if (request.result) {
console.log("Catatan:", request.result);
} else {
console.log("Tidak ditemukan catatan dengan id 1");
}
};

Di sini, kita mengambil catatan dengan id 1. Itu seperti berbelok ke halaman tertentu di日记mu untuk membaca apa yang Anda tulis.

3. Update (Memodifikasi Data)

const transaction = db.transaction(["notes"], "readwrite");
const objectStore = transaction.objectStore("notes");
const request = objectStore.get(1);

request.onsuccess = (event) => {
const data = event.target.result;
data.content = "Konten yang diperbarui!";
const updateRequest = objectStore.put(data);

updateRequest.onsuccess = () => {
console.log("Catatan diperbarui berhasil");
};
};

Kode ini memperbarui catatan yang sudah ada. Itu seperti menghapus sesuatu di日记mu dan menulis versi baru.

4. Delete (Menghapus Data)

const request = db.transaction(["notes"], "readwrite")
.objectStore("notes")
.delete(1);

request.onsuccess = () => {
console.log("Catatan dihapus berhasil");
};

Di sini, kita menghapus catatan. Itu seperti memotong halaman dari日记 (tetapi jangan lakukan itu dalam kehidupan nyata, anak-anak!).

Contoh Implementasi: Aplikasi Catatan Sederhana

Sekarang, mari kita gabungkan semua itu dalam contoh yang lebih lengkap. Kita akan membuat aplikasi catatan sederhana yang menunjukkan semua operasi CRUD.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi Catatan IndexedDB</title>
</head>
<body>
<h1>Catatan Saya</h1>
<input type="text" id="noteTitle" placeholder="Judul Catatan">
<textarea id="noteContent" placeholder="Konten Catatan"></textarea>
<button id="addNote">Tambah Catatan</button>
<div id="notesList"></div>

<script>
let db;
const dbName = "NotesDB";

const request = indexedDB.open(dbName, 1);

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

request.onsuccess = (event) => {
db = event.target.result;
displayNotes();
};

request.onupgradeneeded = (event) => {
db = event.target.result;
const objectStore = db.createObjectStore("notes", { keyPath: "id", autoIncrement: true });
};

function addNote() {
const title = document.getElementById("noteTitle").value;
const content = document.getElementById("noteContent").value;

const transaction = db.transaction(["notes"], "readwrite");
const objectStore = transaction.objectStore("notes");
const note = { title: title, content: content };
const request = objectStore.add(note);

request.onsuccess = () => {
document.getElementById("noteTitle").value = "";
document.getElementById("noteContent").value = "";
displayNotes();
};
}

function displayNotes() {
const notesList = document.getElementById("notesList");
notesList.innerHTML = "";

const objectStore = db.transaction("notes").objectStore("notes");
objectStore.openCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
const noteElement = document.createElement("div");
noteElement.innerHTML = `
<h3>${cursor.value.title}</h3>
<p>${cursor.value.content}</p>
<button onclick="deleteNote(${cursor.value.id})">Hapus</button>
`;
notesList.appendChild(noteElement);
cursor.continue();
}
};
}

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

request.onsuccess = () => {
displayNotes();
};
}

document.getElementById("addNote").onclick = addNote;
</script>
</body>
</html>

Contoh ini menciptakan halaman web sederhana di mana Anda dapat menambahkan, melihat, dan menghapus catatan. Itu adalah aplikasi catatan dasar yang menunjukkan kekuatan IndexedDB.

Kesimpulan

Dan begitu, teman-teman! Kita telah melakukan perjalanan melalui dunia IndexedDB, dari memahami dasarnya hingga implementasi contoh nyata. Ingat, seperti segala alat kuat, IndexedDB memerlukan latihan untuk dikuasai. Jangan frustasi jika itu terasa overwhelming pada awalnya. Terus mencoba, terus mengode, dan segera Anda akan menjadi ahli dalam membuat aplikasi web yang dapat bekerja offline!

Sebelum kita selesai, mari rangkum metode IndexedDB utama yang kita bahas:

Metode	Deskripsi
indexedDB.open()	Membuka koneksi database
createObjectStore()	Membuat object store baru
transaction()	Memulai transaksi baru
add()	Menambahkan rekord baru ke object store
put()	Memperbarui rekord yang ada di object store
get()	Mengambil rekord dari object store
delete()	Menghapus rekord dari object store
openCursor()	Membuka cursor untuk mengiterasi rekord

Simpan ini, dan Anda akan menjadi ahli IndexedDB dalam waktu singkat! Ingat, perjalanan ribuan mil dimulai dari satu langkah. Atau dalam kasus kita, perjalanan menjadi pengembang web ahli dimulai dengan memahami IndexedDB. Selamat mengode, dan semoga basis data Anda selalu terindeks!

Credits: Image by storyset