Cara Menggunakan IndexedDB sebagai Database

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, kesalahan, Dan upgradeneededperistiwa yang dipancarkan dari operasi terbuka.

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.onsukses = fungsi (peristiwa) {
const db = peristiwa.target.hasil;
menghibur.catatan("Database dibuat", 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 mencatat kesalahan ke konsol atau menggunakan yang lain metode penanganan kesalahan:

openRequest.onerror = fungsi (peristiwa) {
// ...
};

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 = fungsi (peristiwa) {
const db = peristiwa.target.hasil;
// Buat toko objek
const userObjectStore = db.createObjectStore("userStore", {
 keyPath: "pengenal",
 Peningkatan otomatis: BENAR,
 });
}

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("nama", "nama", { unik: PALSU });
userObjectStore.createIndex("surel", "surel", { unik: BENAR });

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 tentang bagaimana Anda dapat menangani sebuah upgradeneeded peristiwa:

openRequest.onupgradeneeded = fungsi (peristiwa) {
const db = peristiwa.target.hasil;
// Buat toko objek
const userObjectStore = db.createObjectStore("userStore", {
 keyPath: "pengenal",
 Peningkatan otomatis: BENAR,
 }); 
// Buat indeks
 userObjectStore.createIndex("nama", "nama", { unik: PALSU });
 userObjectStore.createIndex("surel", "surel", { unik: BENAR });
};

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 (s) dari datastore Anda dan modus transaksi, yang dapat 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) => {
// Buka transaksi
const transaksi = db.transaksi("userStore", "Baca tulis");
// Tambahkan data ke penyimpanan objek
const userObjectStore = transaksi.objectStore("userStore");
// Buat permintaan untuk menambahkan userData
const permintaan = userObjectStore.add (userData);
// Tangani acara sukses
 permintaan.keberhasilan = fungsi (peristiwa) {
//...
 };
// Tangani kesalahan
 request.onerror = fungsi (peristiwa) {
//...
 };
};

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 transaksi = db.transaksi("userStore", "hanya bisa dibaca");
const userObjectStore = transaksi.objectStore("userStore");
// Buat permintaan untuk mendapatkan data
const permintaan = userObjectStore.get (id);
 permintaan.keberhasilan = fungsi (peristiwa) {
menghibur.log (permintaan.hasil);
 };
 request.onerror = fungsi (peristiwa) {
// Tangani kesalahan
 };
};

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 transaksi = db.transaksi("userStore", "Baca tulis");
const userObjectStore = transaksi.objectStore("userStore");
// Buat permintaan untuk mendapatkan data
const getRequest = userObjectStore.get (id);
// Tangani acara sukses
 getRequest.onsukses = fungsi (peristiwa) {
// Dapatkan data pengguna lama
const pengguna = acara.target.hasil;
// Perbarui data pengguna
 user.name = userData.nama;
 email pengguna = datapengguna.email;
// Buat permintaan untuk memperbarui data
const putRequest = userObjectStore.put (pengguna);
 putRequest.onsukses = fungsi (peristiwa) {
// Tangani kesuksesan
 };
 putRequest.onerror = fungsi (peristiwa) {
// Tangani kesalahan
 };
 };
 getRequest.onerror = fungsi (peristiwa) {
// Tangani kesalahan
 };
};

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 hapusUserData = (id, db) => {
const transaksi = db.transaksi("userStore", "Baca tulis");
const userObjectStore = transaksi.objectStore("userStore");
// Buat permintaan untuk menghapus data
const permintaan = userObjectStore.delete (id);
 permintaan.keberhasilan = fungsi (peristiwa) {
// Tangani kesuksesan
 };
 request.onerror = fungsi (peristiwa) {
// Tangani kesalahan
 };
};

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 persyaratan aplikasi Anda. Gunakan localStorage untuk penyimpanan sederhana sejumlah kecil data. Pilih IndexedDB untuk kumpulan data terstruktur besar yang memerlukan kueri dan pemfilteran.