Cara Menggunakan IndexedDB sebagai Database
Table of content:
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 IndexedDB membuka metode. Itu membuka metode mengembalikan an IDBOpenDBRequest obyek. Objek ini menyediakan akses ke kesuksesan, kesalahanDan upgradeneeded peristiwa yang dipancarkan dari operasi terbuka.
Baca Juga:
Itu membuka metode 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.
Itu kesuksesan peristiwa terjadi ketika Anda berhasil membuat database. Setelah dipancarkan, Anda mendapatkan akses ke objek database Anda melalui acara.target.hasil:
openRequest.onsuccess = function (event) {
const db = event.target.result;
console.log("Database created", db);
};
Contoh di atas menangani peristiwa sukses dengan mencatat objek database.
Itu kesalahan peristiwa 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) {
};
Itu 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 Toko Objek
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 tanggapan terhadap upgradeneeded peristiwa. 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 createObjectStore metode, 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 primer dengan menentukan jalur kunci, yang merupakan properti yang selalu ada dan berisi nilai unik. Sebagai alternatif, Anda dapat menggunakan generator kunci dengan menyetel keyPath properti untuk “pengenal” dan Peningkatan otomatis properti untuk BENAR di objek konfigurasi Anda.
Misalnya:
openRequest.onupgradeneeded = function (event) {
const db = event.target.result;
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 buatIndeks() metode objek menyimpan 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” pada 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 bagaimana Anda dapat menangani sebuah upgradeneeded peristiwa:
openRequest.onupgradeneeded = function (event) {
const db = event.target.result;
const userObjectStore = db.createObjectStore("userStore", {
keyPath: "id",
autoIncrement: true,
});
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 menambahkan() metode pada transaksi untuk menambahkan data.
Anda dapat membuat transaksi dengan menelepon transaksi metode pada objek database Anda. Metode ini membutuhkan dua argumen: Nama penyimpanan data Anda dan mode transaksinya, yang bisa hanya bisa dibaca (standar) atau Baca tulis.
Kemudian, hubungi tokoobjek() metode pada transaksi dan berikan nama penyimpanan objek yang ingin Anda tambahkan datanya. Metode ini mengembalikan referensi ke penyimpanan objek.
Akhirnya, panggil menambahkan() metode pada penyimpanan objek dan meneruskan data yang ingin Anda tambahkan:
const addUserData = (userData, db) => {
const transaction = db.transaction("userStore", "readwrite");
const userObjectStore = transaction.objectStore("userStore");
const request = userObjectStore.add(userData);
request.onsuccess = function (event) {
};
request.onerror = function (event) {
};
};
Fungsi ini membuat transaksi dengan penyimpanan objek “userStore” dan menyetel mode ke “readwrite”. Kemudian, ia mendapatkan penyimpanan objek dan menambahkan data pengguna untuk itu menggunakan menambahkan metode.
Mengambil Data Dari IndexedDB
Untuk mengambil data dari database IndexedDB, Anda perlu membuat transaksi di penyimpanan objek tempat Anda ingin mengambil datanya, lalu menggunakan mendapatkan() atau dapat semua() metode pada transaksi untuk mengambil data tergantung pada jumlah data yang ingin diambil.
Itu mendapatkan() metode mengambil nilai untuk kunci utama objek yang ingin Anda ambil dan mengembalikan objek dengan kunci yang sesuai dari penyimpanan objek Anda.
Itu dapat semua() metode mengembalikan semua data dalam penyimpanan objek. Itu juga membutuhkan batasan opsional sebagai argumen dan mengembalikan semua data yang cocok dari toko.
const getUserData = (id, db) => {
const transaction = db.transaction("userStore", "readonly");
const userObjectStore = transaction.objectStore("userStore");
const request = userObjectStore.get(id);
request.onsuccess = function (event) {
console.log(request.result);
};
request.onerror = function (event) {
};
};
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.
Memperbarui Data Dengan IndexedDB
Untuk memperbarui data di IndexedDB, Anda perlu membuat transaksi dengan mode “baca tulis”. Lanjutkan dengan mengambil objek yang ingin Anda perbarui menggunakan mendapatkan() metode. Kemudian ubah objek dan panggil meletakkan() metode 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");
const getRequest = userObjectStore.get(id);
getRequest.onsuccess = function (event) {
const user = event.target.result;
user.name = userData.name;
user.email = userData.email;
const putRequest = userObjectStore.put(user);
putRequest.onsuccess = function (event) {
};
putRequest.onerror = function (event) {
};
};
getRequest.onerror = function (event) {
};
};
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 “baca tulis”. Lalu panggil menghapus() metode pada penyimpanan objek untuk menghapus objek dari database:
const deleteUserData = (id, db) => {
const transaction = db.transaction("userStore", "readwrite");
const userObjectStore = transaction.objectStore("userStore");
const request = userObjectStore.delete(id);
request.onsuccess = function (event) {
};
request.onerror = function (event) {
};
};
Fungsi ini membuat transaksi yang menghapus data dengan id yang sesuai dari penyimpanan objek Anda.
Haruskah Anda Menggunakan IndexedDB atau Penyimpanan Lokal?
Pilihan antara IndexedDB dan database sisi klien lainnya, seperti localStorage, bergantung pada kebutuhan aplikasi Anda. Gunakan localStorage untuk penyimpanan sederhana sejumlah kecil data. Pilih IndexedDB untuk kumpulan data terstruktur besar yang memerlukan kueri dan pemfilteran.
Artikel Terkait
