IndexedDB adalah database NoSQL sisi klien yang memungkinkan Anda untuk menyimpan dan mengambil data terstruktur dalam browser web pengguna.
IndexedDB memberikan beberapa keunggulan, seperti memori yang lebih besar dan penyimpanan data offline serta pengambilan dari opsi penyimpanan lain, seperti localStorage. Di sini Anda akan belajar cara menggunakan IndexedDB sebagai database.
Menyiapkan Basis Data Anda
Untuk membuat database, Anda harus membuat permintaan terbuka menggunakan metode terbuka IndexedDB. Metode terbuka mengembalikan objek IDBOpenDBRequest. Objek ini menyediakan akses ke event sukses, error, dan upgradeneeded yang dikeluarkan dari operasi terbuka.
Metode terbuka membutuhkan dua argumen: nama dan nomor versi opsional. Argumen nama mewakili nama database Anda. Nomor versi menentukan versi database yang diharapkan dapat digunakan oleh aplikasi Anda. Nilai default adalah nol.
Berikut cara membuat permintaan terbuka:
const openRequest = indexedDB.open("usersdb", 1);
Setelah membuat permintaan terbuka, Anda perlu mendengarkan dan menangani peristiwa pada objek yang dikembalikan.
Acara sukses terjadi ketika Anda berhasil membuat database. Setelah dipancarkan, Anda mendapatkan akses ke objek database Anda melalui event.target.result:
openRequest.onsuccess = function (event) {
const db = event.target.result;
console.log("Database created", db);
};
Contoh di atas menangani peristiwa sukses dengan mencatat objek database.
Peristiwa kesalahan terjadi jika IndexedDB mengalami masalah saat membuat database. Anda dapat mengatasinya dengan memasukkan kesalahan ke konsol atau menggunakan metode penanganan kesalahan lainnya:
openRequest.onerror = function (event) {
// ...
};
Kejadian upgradeneeded terjadi saat Anda membuat database untuk pertama kalinya atau saat Anda memperbarui versinya. Itu menyala hanya sekali, menjadikannya tempat yang ideal untuk membuat toko objek.
Membuat Object Store
Penyimpanan objek mirip dengan tabel di database relasional sisi server. Anda dapat menggunakan penyimpanan objek untuk menyimpan pasangan kunci-nilai.
Anda harus membuat penyimpanan objek sebagai respons terhadap peristiwa yang ditingkatkan kebutuhannya. Kejadian ini dipicu saat Anda membuat versi baru database atau memutakhirkan versi yang sudah ada. Ini memastikan database dikonfigurasi dengan benar dan terkini sebelum Anda menambahkan data apa pun.
Anda dapat membuat penyimpanan objek menggunakan metode createObjectStore, yang dapat Anda akses pada referensi database Anda. Metode ini mengambil nama toko objek dan objek konfigurasi sebagai argumen.
Di objek konfigurasi, Anda harus menentukan kunci utama. Anda dapat menentukan kunci utama dengan menentukan jalur kunci, yang merupakan properti yang selalu ada dan berisi nilai unik. Sebagai alternatif, Anda dapat menggunakan generator kunci dengan menyetel properti keyPath ke “id” dan properti autoIncrement ke true di objek konfigurasi Anda.
Contoh:
openRequest.onupgradeneeded = function (event) {
const db = event.target.result;
// Create an object store
const userObjectStore = db.createObjectStore("userStore", {
keyPath: "id",
autoIncrement: true,
});
}
Contoh ini membuat penyimpanan objek bernama “userStore” di database Anda dan menyetel kunci utamanya ke id penambahan otomatis.
Mendefinisikan Indeks
Di IndexedDB, indeks adalah cara untuk mengatur dan mengambil data secara lebih efisien. Ini memungkinkan Anda untuk mencari penyimpanan objek dan mengurutkannya berdasarkan properti yang diindeks.
Untuk menentukan indeks pada penyimpanan objek, gunakan metode createIndex() dari objek penyimpanan objek. Metode ini menggunakan nama indeks, nama properti, dan objek konfigurasi sebagai argumen:
userObjectStore.createIndex("name", "name", { unique: false });
userObjectStore.createIndex("email", "email", { unique: true });
Blok kode di atas mendefinisikan dua indeks, “nama” dan “email” di userObjectStore. Indeks “nama” tidak unik, artinya beberapa objek dapat memiliki nilai nama yang sama, sedangkan indeks “email” bersifat unik, memastikan tidak ada dua objek yang memiliki nilai email yang sama.
Berikut adalah contoh lengkap tentang bagaimana Anda dapat menangani acara yang dimutakhirkan:
openRequest.onupgradeneeded = function (event) {
const db = event.target.result;
// Create an object store
const userObjectStore = db.createObjectStore("userStore", {
keyPath: "id",
autoIncrement: true,
});
// Create indexes
userObjectStore.createIndex("name", "name", { unique: false });
userObjectStore.createIndex("email", "email", { unique: true });
};
Menambahkan Data ke IndexedDB
Transaksi di IndexedDB adalah cara mengelompokkan beberapa operasi baca dan tulis ke dalam satu operasi. Untuk memastikan konsistensi dan integritas data, jika salah satu operasi dalam transaksi gagal, IndexedDB mengembalikan semua operasi.
Untuk menambahkan data ke database IndexedDB, Anda perlu membuat transaksi di penyimpanan objek yang ingin Anda tambahkan datanya, lalu gunakan metode add() pada transaksi untuk menambahkan data.
Anda dapat membuat transaksi dengan memanggil metode transaksi pada objek database Anda. Metode ini membutuhkan dua argumen: Nama penyimpanan data Anda dan mode transaksi, yang dapat dibaca saja (default) atau ditulis ulang.
Kemudian, panggil metode objectStore() pada transaksi dan berikan nama penyimpanan objek yang ingin Anda tambahkan datanya. Metode ini mengembalikan referensi ke penyimpanan objek.
Terakhir, panggil metode add() pada penyimpanan objek dan teruskan data yang ingin Anda tambahkan:
const addUserData = (userData, db) => {
// Open a transaction
const transaction = db.transaction("userStore", "readwrite");
// Add data to the object store
const userObjectStore = transaction.objectStore("userStore");
// Make a request to add userData
const request = userObjectStore.add(userData);
// Handle a success event
request.onsuccess = function (event) {
//...
};
// Handle an error
request.onerror = function (event) {
//...
};
};
Fungsi ini membuat transaksi dengan penyimpanan objek “userStore” dan menyetel mode ke “readwrite”. Kemudian, ia mendapatkan objek store dan menambahkan userData ke dalamnya menggunakan metode add.
Mengambil Data Dari IndexedDB
Untuk mengambil data dari database IndexedDB, Anda perlu membuat transaksi di penyimpanan objek yang ingin Anda ambil datanya, lalu gunakan metode get() atau getAll() pada transaksi untuk mengambil data tergantung pada jumlah data Anda ingin mengambil.
Metode get() mengambil nilai untuk kunci utama objek yang ingin Anda ambil dan mengembalikan objek dengan kunci yang sesuai dari penyimpanan objek Anda.
Metode getAll() mengembalikan semua data di penyimpanan objek. Itu juga membutuhkan batasan opsional sebagai argumen dan mengembalikan semua data yang cocok.
const getUserData = (id, db) => {
const transaction = db.transaction("userStore", "readonly");
const userObjectStore = transaction.objectStore("userStore");
// Make a request to get the data
const request = userObjectStore.get(id);
request.onsuccess = function (event) {
console.log(request.result);
};
request.onerror = function (event) {
// Handle error
};
};
Fungsi ini membuat transaksi dengan penyimpanan objek “userStore” dan menyetel mode ke “readonly”. Itu kemudian mengambil data pengguna dengan id yang cocok dari penyimpanan objek.
Update Data Dengan IndexedDB
Untuk memperbarui data di IndexedDB, Anda perlu membuat transaksi dengan mode “readwrite”. Lanjutkan dengan mengambil objek yang ingin Anda perbarui menggunakan metode get(). Kemudian modifikasi objek dan panggil metode put() pada penyimpanan objek untuk menyimpan objek yang diperbarui kembali ke database.
const updateUserData = (id, userData, db) => {
const transaction = db.transaction("userStore", "readwrite");
const userObjectStore = transaction.objectStore("userStore");
// Make a request to get the data
const getRequest = userObjectStore.get(id);
// Handle a success event
getRequest.onsuccess = function (event) {
// Get the old user data
const user = event.target.result;
// Update the user data
user.name = userData.name;
user.email = userData.email;
// Make a request to update the data
const putRequest = userObjectStore.put(user);
putRequest.onsuccess = function (event) {
// Handle success
};
putRequest.onerror = function (event) {
// Handle error
};
};
getRequest.onerror = function (event) {
// Handle error
};
};
Fungsi ini membuat transaksi untuk mendapatkan dan memperbarui data database Anda.
Menghapus Data Dari IndexedDB
Untuk menghapus data dari IndexedDB, Anda perlu membuat transaksi dengan mode “readwrite”. Kemudian panggil metode delete() pada penyimpanan objek untuk menghapus objek dari database:
const deleteUserData = (id, db) => {
const transaction = db.transaction("userStore", "readwrite");
const userObjectStore = transaction.objectStore("userStore");
// Make a request to delete the data
const request = userObjectStore.delete(id);
request.onsuccess = function (event) {
// Handle success
};
request.onerror = function (event) {
// Handle error
};
};
Fungsi ini membuat transaksi yang menghapus data dengan id yang sesuai dari penyimpanan objek Anda.
Haruskah Menggunakan IndexedDB atau Penyimpanan Lokal?
Pilihan antara IndexedDB dan database sisi klien lainnya, seperti localStorage, bergantung pada persyaratan aplikasi Anda. Gunakan localStorage untuk penyimpanan sederhana sejumlah kecil data. Pilih IndexedDB untuk kumpulan data terstruktur besar yang memerlukan kueri dan pemfilteran.
