IndexedDB adalah API tingkat rendah yang menyimpan sejumlah besar data terstruktur (termasuk file/ gumpalan) untuk penyimpanan klien. API menggunakan indeks untuk mencapai pencarian kinerja tinggi untuk data.
Baru -baru ini, ada kebutuhan bisnis yang dapat menyimpan data secara offline, dan formulir dan gambar dapat diunggah ketika ada sinyal jaringan. Jadi saya mempelajari indekseddb html5.
Untuk kebutuhan hanya penyimpanan bidang tertentu, penyimpanan lokal dan penyimpanan sesi dapat digunakan untuk menyelesaikannya. Tetapi begitu sejumlah besar data disimpan, penyimpanan lokal dan penyimpanan sesi jauh dari memenuhi kebutuhan. Pada saat ini, kekuatan IndexedDB akan tercermin.
1. Buat atau buka database/* Kompatibel dengan indexeddb browser yang berbeda*/consteddb = window.indexeddb || Versi); // Nama: Nama Basis Data, Versi: Nomor Versi Basis Data
Karena IndexedDB kompatibel pada browser yang berbeda, kita memerlukan bagian dari fungsi untuk kompatibel dengan IndexedDB.
2. Fungsi panggilan balik yang terhubung ke database Request.addeventListener ('Success', function (event) {// buka atau buat keberhasilan basis data}, false); );Setelah menghubungkan ke database, permintaan akan mendengarkan tiga negara bagian:
Status upgradneeded adalah untuk memantau keadaan ini ketika indexedDDB membuat database baru dan indexedb.open (nama, versi) versi (nomor versi database). Ketika nomor versi tidak berubah, keadaan ini tidak akan dipicu. Penciptaan dan penghapusan ObjectStore dari database dilakukan di bawah acara pemantauan ini.
3. Buat dan hapus ObjectStoreDi IndexedDB, ObjectStore mirip dengan tabel database.
Request.addeventListener ('upgradEeded', function (event) {// Buat instance basis data const db = event.target.result; // matikan database db.close (); // bkystorenames.contains (objectstoreName);/ / Hapus ObjectStore db.DeleteObjectStore (ObjectStoreName);}, false);Anda dapat menggunakan metode berikut untuk membuat ObjectStore
Request.addeventListener ('upgradeneeded', function (event) {// Buat instance basis data const db = event.target.result; // Tentukan apakah ada objekstore if (! Db.objectStoreNames. DB .CreateObjectStore (ObjectStoreName, {keypath: keypath // keypath sebagai kata kunci pencarian sebagai ObjectStore}); indeks unik});}}, false); 4. Penambahan Data, Penghapusan, Perubahan Periksa Request.addeventListener ('Success', function (event) {// Buat instance basis data const db = event.target.result; // Temukan ObjectStore db.transaction (ObjectStorename, WA); // WA adalah 'readwrite', Ketika data dapat dibaca dan ditulis // ketika data 'readonly', data hanya membaca const store = transaction.ObjectStore (ObjectStoreName);}, false);Penambahan Database, Penghapusan dan Ubah:
// Tambahkan data. STORD DATA yang sesuai (nilai) yang sesuai dengan kata kunci yang ditentukan; ('Success', function (event) {// fungsi panggilan balik}, false);Temukan Data Menurut Indeks
Const index = Store.Index (IndexName); value // Data result.continue (); // iterasi, migrasi ke bawah}}, false);
Temukan data sesuai dengan ruang lingkup indeks
const index = store.index (indexName); Objek IDBKeyRange adalah data dari kisaran yang ditentukan dari kisaran yang ditentukan dari kondisi sesuai dengan kondisi*/// lebih besar dari atau lebih dari atau sama dengan rentang = IDBKeyRange.lowerbound (nilai, true) // (nilai, + ∞),> valueRange = IDBKeyRange. (Nilai, isopen) // lebih besar dari atau sama dengan nilai1, lebih kecil dari atau sama dengan value2idbkeyrange.bound (value1, value2, isopen1, isopen2)
Akhirnya, perpustakaan IndexedDB dienkapsulasi oleh saya sendiri.
Di atas adalah indekseddb dari penyimpanan lokal HTML5 yang diperkenalkan oleh Xiaobian. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!