IndexedDB adalah database berorientasi objek di dalam browser yang kuat untuk menyimpan data secara lokal. Ini memungkinkan pengembang untuk membuat, membaca, memperbarui, dan menghapus data dengan efisien. Dalam artikel ini, kita akan belajar langkah-langkah untuk melakukan operasi CRUD (Create, Read, Update, Delete) menggunakan IndexedDB, disertai dengan contoh implementasinya.
1. Pengenalan ke IndexedDB
IndexedDB adalah database berorientasi objek di dalam browser yang memungkinkan penyimpanan data dalam struktur key-value. Ini adalah solusi yang berguna untuk menyimpan data lokal dalam aplikasi web, bahkan ketika pengguna tidak memiliki koneksi internet.
2. Membuat Database dan Objek Penyimpanan
Langkah pertama adalah membuat atau membuka database dan objek penyimpanan di dalamnya. Dalam contoh ini, mari kita buat database untuk menyimpan catatan pengguna.
const dbPromise = indexedDB.open('UserDatabase', 1);
dbPromise.onupgradeneeded = event => {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
const userStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
userStore.createIndex('username', 'username', { unique: true });
}
};3. Membaca Data dari Database
Untuk membaca data dari database, kita akan menggunakan transaksi dan objek penyimpanan yang sesuai.
function getUserById(id) {
return new Promise((resolve, reject) => {
const db = dbPromise.result;
const transaction = db.transaction('users', 'readonly');
const store = transaction.objectStore('users');
const request = store.get(id);
request.onsuccess = () => {
resolve(request.result);
};
request.onerror = () => {
reject(request.error);
};
});
}
// Contoh pemanggilan
getUserById(1)
.then(user => {
console.log('Data pengguna:', user);
})
.catch(error => {
console.error('Gagal mendapatkan data pengguna:', error);
});
4. Menambah Data ke Database
Untuk menambahkan data ke database, kita akan menggunakan operasi add pada objek penyimpanan.
function addUser(username, email) {
return new Promise((resolve, reject) => {
const db = dbPromise.result;
const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');
const userData = { username, email };
const request = store.add(userData);
request.onsuccess = () => {
resolve(request.result);
};
request.onerror = () => {
reject(request.error);
};
});
}
// Contoh pemanggilan
addUser('john_doe', 'john@example.com')
.then(id => {
console.log('Pengguna berhasil ditambahkan dengan ID:', id);
})
.catch(error => {
console.error('Gagal menambahkan pengguna:', error);
});
5. Update Data di Database
Untuk memperbarui data di database, kita akan menggunakan operasi put pada objek penyimpanan.
function updateUser(id, newData) {
return new Promise((resolve, reject) => {
const db = dbPromise.result;
const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');
const request = store.put(newData, id);
request.onsuccess = () => {
resolve(request.result);
};
request.onerror = () => {
reject(request.error);
};
});
}
// Contoh pemanggilan
const updatedData = { id: 1, username: 'jane_doe', email: 'jane@example.com' };
updateUser(1, updatedData)
.then(id => {
console.log('Data pengguna berhasil diperbarui:', id);
})
.catch(error => {
console.error('Gagal memperbarui data pengguna:', error);
});
6. Menghapus Data dari Database
Untuk menghapus data dari database, kita akan menggunakan operasi delete pada objek penyimpanan.
function deleteUser(id) {
return new Promise((resolve, reject) => {
const db = dbPromise.result;
const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');
const request = store.delete(id);
request.onsuccess = () => {
resolve();
};
request.onerror = () => {
reject(request.error);
};
});
}
// Contoh pemanggilan
deleteUser(1)
.then(() => {
console.log('Pengguna berhasil dihapus.');
})
.catch(error => {
console.error('Gagal menghapus pengguna:', error);
});
Sekarang Anda memiliki panduan lengkap untuk melakukan operasi CRUD dengan IndexedDB beserta contoh implementasinya. Selamat mencoba dan semoga berhasil mengintegrasikan IndexedDB ke dalam proyek Anda!