Contoh menggunakan basis data indexeddb di html5

Dalam penyimpanan lokal HTML5, ada database yang disebut IndexedDB. Dari bagian sebelumnya: HTML5 Advanced Series: Web Storage, kami tahu bahwa penyimpanan web dapat dengan mudah mengakses data sederhana dalam akses lokal, tetapi untuk sejumlah besar penyimpanan terstruktur, keuntungan indeksedb bahkan lebih jelas. Selanjutnya, mari kita lihat bagaimana IndexedDB menyimpan data.

Satu situs web dapat memiliki beberapa database IndexedDB, tetapi nama masing -masing database unik. Kita perlu menghubungkan database tertentu melalui nama database.

 var riset = indexeddb.open ('dbname', 1); } Permintaan.

Kami menggunakan metode indexeddb.open untuk menghubungkan database. Metode ini akan mengembalikan objek IDBOpendBRequest untuk mewakili objek permintaan yang meminta database. Kami dapat mendefinisikan metode di mana koneksi berhasil atau gagal dieksekusi dengan memantau peristiwa OnSuccccess dan OnError dari objek permintaan.

Karena gudang data dalam database tidak mengizinkan gudang database berubah dalam versi yang sama, nomor versi baru diperlukan untuk memperbarui versi dalam metode indexeddb.open untuk menghindari berulang kali memodifikasi database dalam versi yang sama. Nomor versi harus menjadi bilangan bulat!

 var riset = indexeddb.open ('dbname', 2); is = is = is = = ' + e.newversion);}

Kami mendefinisikan metode yang dijalankan ketika versi database diperbarui dengan memantau acara OnUpgradeneeded dari objek permintaan.

Setelah menggunakan IndexedB.Open untuk terhubung ke keberhasilan database, objek IDBOpendBRequest akan dikembalikan.

 var riset = indexeddb.open ('dbname', 2); tutup ();

 indexeddb.deletedatabase ('dbname');

Object Store adalah dasar dari basis data IndexedDB.

 var riset = indexeddb.open ('dbname', 3); 'userid', autoincrement: false});

DB.CreateObjectStore Metode menerima dua parameter. Properti keypath dalam objek ini adalah kunci utama, yang setara dengan ID dalam tabel database sebagai kunci utama. Atribut autoiincrement adalah false, yang berarti bahwa nilai kunci utama tidak meningkat dengan sendirinya.

Catatan: Dalam database, nama gudang objek tidak dapat diulang, jika tidak browser akan melaporkan kesalahan.

Dalam database IndexedDB, indeks dibuat melalui atribut tertentu dari objek data.

 var riset = indexeddb.open ('dbname', 4); 'userid', autoincrement: false});

Metode Store.CreateIndex menerima tiga parameter. Nilai adalah objek JS. Properti unik dalam objek ini benar, yang berarti bahwa nilai indeks tidak dapat sama, yaitu nama pengguna dari dua data tidak dapat sama, dan false bisa sama.

Di IndexedDB, semua operasi data hanya dapat dilakukan dalam urusan. Setelah database berhasil, Anda dapat menggunakan metode transaksi objek IdbopendBrequest untuk membuka hanya membaca atau membaca dan menulis transaksi.

 var riset = indexeddb.open ('dbname', 5); tx.onComplete = function (e) {console.log ('Transaksi sudah lebih');} tx.onabort = fungsi (e) {console.log ('Transaksi telah ditangguhkan');}}

Metode DB.Transaction menerima dua parameter. Parameter kedua adalah mode transaksi. Dapat ditransmisikan ke dalam Readwrite untuk operasi membaca dan menulis.

1. add (): Tambahkan data. Menerima parameter ke objek yang perlu disimpan di gudang objek.
2. put (): Tambah atau ubah data. Menerima parameter ke objek yang perlu disimpan di gudang objek.
3. get (): Dapatkan data. Menerima parameter ke nilai kunci utama yang perlu diperoleh.
4. hapus (): Hapus data. Menerima parameter ke nilai kunci utama yang perlu diperoleh.

 var riset = indexeddb.open ('dbname', 5); ',', 'Readwrite'); nilai); / / simpan data var repk2 = get (1); hapus (1); // hapus data dari data indeks 1 req3.onsuccess = function () {console.log ('hapus keberhasilan data'); }}}}}}

Peran ADD dan PUT serupa. dan gunakan Tambahkan untuk menyimpan data.

Kami tahu di atas dapat memperoleh data menggunakan metode get (), tetapi nilai kunci utama diperlukan. Jika kami ingin mendapatkan berbagai data, kami dapat menggunakan kursor. Kursor dibuat dan dibuka dengan metode opencursor dari gudang objek.

Metode OpenCursor menerima dua parameter.

 // BoundRange mewakili kumpulan nilai kunci primer dari 1 hingga 10 (termasuk 1 dan 10). // Jika parameter ketiga benar, itu berarti bahwa nilai kunci minimum bukan 1. Jika parameter keempat benar, itu berarti tidak mengandung nilai kunci maksimum 10, dan defaultnya adalah falsevar boundrange = idbkeyrande.bound (1, 10, false false, false); // OnlyRange menunjukkan kumpulan nilai kunci utama. Parameter satu -satunya () adalah nilai kunci utama, tipe integer. VarmingRange = IDBKeyRange.ule (1); // Parameter kedua adalah opsional, yang berarti bahwa true tidak termasuk kunci primer minimum 1, salah dimasukkan, dan default untuk falsevar logerrange = IDBKeyRange. dari nilai kunci utama kurang dari 10 esensi // Parameter kedua adalah opsional, yang berarti bahwa true tidak termasuk kunci utama terbesar 10, dan salah termasuk, dan standarnya adalah falsevar upperrange = idbkeyrange.upeperbound (10, false);

Parameter kedua dari metode OpenCursor mewakili arah membaca kursor.

1. Berikutnya: Data di kursor diatur sesuai dengan nilai kunci utama.
2. NextUnique: Data di kursor diatur sesuai dengan nilai kunci utama.
3. Sebelumnya: Data dalam kursor disusun sesuai dengan nilai utama nilai kunci utama.
4. Prevunique: Data dalam kursor diatur oleh nilai kunci utama.

 var riset = indexeddb.open ('dbname', 6); ',', ',' Readwrite '); ; }

Ketika ada data yang memenuhi kondisi pencarian, Anda dapat memperbarui data melalui metode pembaruan:

 Cursor.updata ({userid: cursor.key, nama pengguna: 'halo', usia: 18});

Data ini dapat dihapus melalui metode Hapus:

 kursor.delete ();

Anda dapat terus membaca data berikutnya melalui metode Constinue, jika tidak, Anda tidak akan terus membaca setelah membaca bagian data pertama:

 kursor.continue ();

Dari menghubungkan database, membuat gudang objek, indeks, hingga operasi dan pengambilan data, menyelesaikan proses lengkap data akses indexedDB. Di bawah ini melalui contoh lengkap untuk lebih memahami basis data IndexedDB. Alamat Kode: IndexedDB-Demo

Di atas adalah semua isi artikel ini.