Pengenalan
IndexedDB ialah pangkalan data WEB HTML5 yang membenarkan aplikasi WEB HTML5 menyimpan data pada penyemak imbas pengguna. IndexedDB sangat berkuasa dan berguna untuk aplikasi Ia boleh menyimpan sejumlah besar data dalam chrome, IE, Firefox dan pelayar WEB lain Berikut ialah pengenalan ringkas kepada konsep asas IndexedDB.
Apakah itu IndexedDB
IndexedDB, storan data baharu HTML5, boleh menyimpan dan mengendalikan data pada klien, menjadikan aplikasi dimuatkan dengan lebih pantas dan bertindak balas dengan lebih baik. Ia berbeza daripada pangkalan data hubungan kerana ia mempunyai jadual dan rekod data. Ia mempengaruhi cara kami mereka bentuk dan mencipta aplikasi. IndexedDB mencipta objek dengan jenis data dan objek berterusan JavaScript yang mudah Setiap objek boleh mempunyai indeks, menjadikannya cekap untuk membuat pertanyaan dan melintasi keseluruhan koleksi. Artikel ini memberi anda contoh kehidupan sebenar tentang cara menggunakan IndexedDB dalam aplikasi web.
Mula
Kita perlu memasukkan pra-kod berikut sebelum pelaksanaan
JavaScript KodSalin kandungan ke papan keratan
-
var indexedDB = tetingkap.indexedDB || window.mozIndexedDB || |. tetingkap.msIndexedDB;
-
//awalan tetingkap.objek IDB
-
var
- IDBTransaction = tetingkap.IDBTransaction || window.webkitIDBTransaction ||.
var
IDBKeyRange-
= tetingkap.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
- jika (!indexedDB) {
- makluman("Pelayar anda tidak menyokong versi IndexedDB yang stabil.")
- }
-
Buka IndexedDB
Sebelum mencipta pangkalan data, kami perlu mencipta data untuk pangkalan data terlebih dahulu. Andaikan kami mempunyai maklumat pengguna berikut:
JavaScript
Kod
Salin kandungan ke papan keratan
var
Data pengguna-
= [
{ id: "1", nama: "Tapas", umur: 33, e-mel: "tapas@example.com" },
- { id: "2", nama: "Bidulata", umur: 55, e-mel: "bidu@home.com" }
- ];
-
Kini kami perlu membuka pangkalan data kami menggunakan kaedah open():
JavaScript
Kod
Salin kandungan ke papan keratan
-
var db;
-
var permintaan = indexedDB.open("databaseName", 1);
-
-
request.onerror = fungsi(e) {
-
console.log("error: ", e);
-
};
-
-
permintaan.tidak berjaya = fungsi(e) {
-
db = permintaan.hasil;
-
console.log("success: " db);
-
};
-
request.onupgradeneeded = fungsi(e) {
-
-
}
如上所示，我们已经打开了名为"databaseName"，指定版本号的数据库，open()方法有了名为"databaseName"，指定版本号的数据库，open()方法有两个个：1.参数是数据库名称，它会检测名称为"databaseName"的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。
2.笪数版本，用于用户更新数据库结构。
onSuccess处理
发生成功事件时“onSuccess”被触发，如果所有成功的请求都在此，处从值给db变量保存请求的结果供以后使用。
onerror的处理程序
发生错误事件时“onerror”被触发，如果打开数据库开数据库的过生库的过生库的过>Onupgradeneeded处理程序
如果你想更新数据库（创建，删除或修改数据库），那么你必须实现onupgradeneeded处理程店库中做任何更改。 在“onupgradeneeded”处理程序中是可以改变数据库的结构的唯一地方。
创建和添加数据到表：IndexedDB使用对象存储来存储数据，而不是通而不是通而不是通过菡。在对象存储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码显示了并插入预先准备好的数据：
JavaScript
Kod
复制内容到剪贴板
request.onupgradeneeded
= -
fungsi(acara) {
var objectStore
- = event.target.result.createObjectStore("users", {keyPath: "id "});
untuk (var i dalam Data pengguna) {
- objectStore.add(userData[i]);
- }
- }
-
Kami mencipta stor objek menggunakan kaedah createObjectStore(). Kaedah ini menerima dua parameter: - nama yang disimpan dan objek parameter. Di sini, kami mempunyai stor objek yang dipanggil "pengguna" dan mentakrifkan keyPath, iaitu atribut yang menjadikan objek itu unik. Di sini, kami menggunakan "id" sebagai keyPath, nilai ini unik dalam stor objek, dan kami perlu memastikan bahawa atribut "ID" ini wujud dalam setiap objek dalam stor objek. Setelah stor objek dibuat, kita boleh mula menambah data ke dalamnya menggunakan gelung for.
Menambah data secara manual pada jadual:
Kami boleh menambah data tambahan pada pangkalan data secara manual.
JavaScript KodSalin kandungan ke papan keratan
-
fungsi Tambah() {
-
var permintaan = db.transaction(["users"], "readwrite").objectStore( "pengguna")
-
.tambah({ id: "3", nama: "Gautam", umur: 30, e-mel: "gautam@store.org" });
-
-
permintaan.tidak berjaya = fungsi(e) {
- alert("Gautam telah ditambahkan pada pangkalan data.");
}; -
-
-
request.onerror = fungsi(e) {
alert("Tidak dapat menambah maklumat.");
-
}
-
-
}
-
Sebelum kami melakukan sebarang operasi CRUD (baca, tulis, ubah suai) dalam pangkalan data, kami perlu menggunakan transaksi. Kaedah transaction() digunakan untuk menentukan storan objek yang ingin kami lakukan pemprosesan transaksi. Kaedah transaction() menerima 3 parameter (yang kedua dan ketiga adalah pilihan). Yang pertama ialah senarai stor objek yang ingin kami proses, yang kedua menentukan jika kami mahu baca sahaja/baca-tulis, dan yang ketiga ialah perubahan versi.
Membaca data daripada jadual
Kaedah get() digunakan untuk mendapatkan semula data daripada storan objek. Kami sebelum ini telah menetapkan id objek sebagai keyPath, jadi kaedah get() akan mencari objek dengan nilai id yang sama. Kod berikut akan mengembalikan objek yang kami namakan "Bidulata":
JavaScript Kod
Salin kandungan ke papan keratan
-
fungsi Read() {
-
var objectStore = db.transaction(["users"]).objectStore("users") ;
-
var permintaan = objectStore.get("2");
-
request.onerror = fungsi(acara) {
-
alert("Tidak dapat mendapatkan data dari pangkalan data!”);
-
};
-
permintaan.tidak berjaya = fungsi(acara) {
-
jika(request.result) {
-
makluman("Nama: " request.result.name ", Umur: " request.result.age ", Emel: " request.result.email);
-
} lain {
-
alert("Bidulata tidak dapat ditemui dalam pangkalan data anda!”);
-
}
-
};
-
}
从表中读取所有数据
下面的方法检索表中的所有数据里检索对象存储中的所有数据：
JavaScript Kod复制内容到剪贴板
-
fungsi ReadAll() {
-
var objectStore = db.transaction("users").objectStore("users");
-
var req = objectStore.openCursor();
-
req.tidak berjaya = fungsi(acara) {
-
db.close();
-
var res = acara.target.result;
-
jika (res) {
-
alert("Key " res.key " is " res.value.name ", Umur: " res.value.age ", E-mel: " res.value.email);
-
res.continue();
-
}
-
};
-
req.onerror = fungsi (e) {
-
console.log("Ralat Mendapatkan: ", e);
-
};
-
}
该openCursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条>下面的方法从对象中删除记录。
JavaScript
Kod复制内容到剪贴板
-
fungsi Alih Keluar() {
-
var permintaan = db.transaction(["users"], "readwrite").objectStore( "pengguna").delete("1");
-
permintaan.tidak berjaya = fungsi(acara) {
-
alert("Entri Tapas telah dialih keluar daripada pangkalan data anda."
-
};
-
}
Kita perlu menghantar keyPath objek sebagai parameter kepada kaedah delete().
Kod akhir
Kaedah berikut memadamkan rekod daripada sumber objek:
JavaScript KodSalin kandungan ke papan keratan
-
>
-
<kepala>
-
<meta http-equiv=" Jenis Kandungan" kandungan="teks/html; charset=utf-8" />
-
<tajuk>IndexedDBtajuk>
-
<skrip taip="teks/ javascript">
-
var indexedDB = tetingkap.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-
-
//prefiks dari tetingkap.objek IDB
-
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-
var IDBKeyRange = tetingkap.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
-
-
jika (!indexedDB) {
-
makluman("Pelayar anda tidak menyokong versi stabil IndexedDB.”)
-
}
-
var Data pelanggan = [
-
{ id: "1", nama: "Tapas", umur: 33, e-mel: "tapas@example.com" },
-
{ id: "2", nama: "Bidulata", umur: 55, e-mel: "bidu@home.com" }
-
];
-
var db;
-
var permintaan = indexedDB.open("newDatabase", 1);
-
-
request.onerror = fungsi(e) {
-
console.log("error: ", e);
-
};
-
-
permintaan.tidak berjaya = fungsi(e) {
-
db = permintaan.hasil;
-
console.log("success: " db);
-
};
-
-
request.onupgradeneeded = fungsi(acara) {
-
-
}
-
request.onupgradeneeded = fungsi(acara) {
-
var objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});
-
untuk (var i dalam Data pengguna) {
-
objectStore.add(userData[i]);
-
}
-
}
-
fungsi Tambah() {
-
var permintaan = db.transaction(["users"], "readwrite")
-
.objectStore("pengguna")
-
.add({ id: "3", nama: "Gautam", umur: 30, emel: "gautam@store.org" });
-
-
permintaan.tidak berjaya = fungsi(e) {
-
alert("Gautam telah ditambahkan ke pangkalan data.”);
-
};
-
-
request.onerror = fungsi(e) {
-
alert("Tidak dapat menambah maklumat.");
-
}
-
-
}
-
fungsi Read() {
-
var objectStore = db.transaction("users").objectStore("users");
-
var permintaan = objectStore.get("2");
-
request.onerror = fungsi(acara) {
-
alert("Tidak dapat mendapatkan data dari pangkalan data!”);
-
};
-
permintaan.tidak berjaya = fungsi(acara) {
-
jika(request.result) {
-
makluman("Nama: " request.result.name ", Umur: " request.result.age ", Emel: " request.result.email);
-
} lain {
-
alert("Bidulata tidak dapat ditemui dalam pangkalan data anda!”);
-
}
-
};
-
}
-
fungsi ReadAll() {
-
var objectStore = db.transaction("users").objectStore("users");
-
var req = objectStore.openCursor();
-
req.tidak berjaya = fungsi(acara) {
-
db.close();
-
var res = acara.target.result;
-
jika (res) {
-
alert("Key " res.key " is " res.value.name ", Umur: " res.value.age ", E-mel: " res.value.email);
-
res.continue();
-
}
-
};
-
req.onerror = fungsi (e) {
-
console.log("Ralat Mendapatkan: ", e);
-
};
-
}
-
fungsi Alih Keluar() {
-
var permintaan = db.transaction(["users"], "readwrite").objectStore( "pengguna").delete("1");
-
permintaan.tidak berjaya = fungsi(acara) {
-
alert("Entri Tapas telah dialih keluar dari pangkalan data anda.");
-
};
-
}
-
skrip>
-
kepala>
-
-
<badan>
-
<butang onklik="Tambah( )">Tambah rekodbutang>
-
<butang onklik="Alih keluar( )">Padam rekodbutang>
-
<butang onklik="Baca( )">Dapatkan satu rekodbutang>
-
<butang onklik="BacaSemua( )">Dapatkan semula semua rekodbutang>
-
badan>
-
html>
锁
localStorage是不带lock功能的。那么要实现前端的数据共享并且需要lock功能那就需要共需要家比如indexedDB。indededDB使用的是事务处理的机制，那实际上就是lock功能。
做这个测试需要先简单的封装下indexedDB的操作，因为indexedDB的连接比较麻烀单的封装下indexedDB的操作，因为indexedDB的连接比较麻烦而中中中文需要用到
JavaScript Kod复制内容到剪贴板
-
//db.js
-
//Merangkum operasi transaksi
-
IDBDatabase.prototype.doTransaction=fungsi(f){
-
f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
-
};
-
//Sambung ke pangkalan data dan panggil fungsi utama selepas berjaya
-
(fungsi(){
-
//Buka pangkalan data
-
var cn=indexedDB.open("TestDB",1);
//Buat objek data -
-
cn.onupgradeneeded=fungsi(e){
e.target.result.createObjectStore("Obj");
-
};
-
//Sambungan pangkalan data berjaya
-
cn.tidak berjaya-
=fungsi(e){
utama(e.sasaran.hasil);
}; -
})(); -
Kemudian terdapat dua halaman ujian -
-
<
skrip- src="db. js">skrip>
<
skrip- >
//a.html
fungsi utama(e){ -
(function callee(){ -
//Mulakan transaksi -
e.doTransaction(function(e){ -
e.put(1,"test"); //Tetapkan nilai ujian kepada 1 -
e.put(2,"test"); //Tetapkan nilai ujian kepada 2 -
}); -
setTimeout(callee);
-
})();
-
};
-
Skript>
-
<script src="db. js">script>
-
<Skript>
-
//b.html
-
Funktion main(e){
-
(function callee(){
-
//Eine Transaktion starten
-
e.doTransaction(function(e){
-
//Den Wert des Tests ermitteln
-
e.get("test").onsuccess=function(e){
-
console.log(e.target.result);
-
};
-
});
-
setTimeout(callee);
-
})();
-
};
-
Skript>
Ersetzen Sie localStorage durch die Transaktionsverarbeitung indexedDB. Aber das Ergebnis ist anders
Während des Tests erfolgt möglicherweise keine sofortige Ausgabe in b.html, da indexedDB mit der Verarbeitung von a.html-Dingen beschäftigt ist und die b.html-Transaktion in der Transaktionswarteschlange wartet. Aber egal was passiert, das Ausgabeergebnis wird nicht den Wert 1 haben. Denn die kleinste Verarbeitungseinheit von indexedDB ist eine Transaktion und kein Ausdruck wie localStorage. Auf diese Weise müssen Sie nur die Dinge, die zwischen Sperren und Entsperren verarbeitet werden müssen, in eine Transaktion einbinden. Darüber hinaus ist die Browserunterstützung für indexedDB nicht so gut wie für localStorage, sodass bei der Verwendung die Browserkompatibilität berücksichtigt werden muss.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
