masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > teks badan

Analisis mendalam kemahiran tutorial pangkalan data indeks IndexedDB_html5 HTML5

WBOY
Lepaskan： 2016-05-16 15:46:20
asal
1454 orang telah melayarinya

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
  1. var indexedDB = tetingkap.indexedDB || window.mozIndexedDB || |. tetingkap.msIndexedDB;
  2. //awalan tetingkap.objek IDB
  3. var
  4. IDBTransaction = tetingkap.IDBTransaction || window.webkitIDBTransaction ||. var
    5. IDBKeyRange
  5. = tetingkap.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
  6. jika (!indexedDB) {
  7. makluman("Pelayar anda tidak menyokong versi IndexedDB yang stabil.")
  8. }
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
  1. = [ { id: "1", nama: "Tapas", umur: 33, e-mel: "tapas@example.com" },
  2. { id: "2", nama: "Bidulata", umur: 55, e-mel: "bidu@home.com" }
  3. ];
  4. Kini kami perlu membuka pangkalan data kami menggunakan kaedah open():

JavaScript

Kod
Salin kandungan ke papan keratan
  1. var db;   
  2. var permintaan = indexedDB.open("databaseName", 1);   
  3.     
  4. request.onerror = fungsi(e) {   
  5. console.log("error: ", e);   
  6. };   
  7.     
  8. permintaan.tidak berjaya = fungsi(e) {   
  9. db = permintaan.hasil;   
  10. console.log("success: "  db);   
  11. };   
  12. request.onupgradeneeded = fungsi(e) {   
  13.     
  14. }  

如上所示，我们已经打开了名为"databaseName"，指定版本号的数据库，open()方法有了名为"databaseName"，指定版本号的数据库，open()方法有两个个：1.参数是数据库名称，它会检测名称为"databaseName"的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。
2.笪数版本，用于用户更新数据库结构。
 

onSuccess处理
发生成功事件时“onSuccess”被触发，如果所有成功的请求都在此，处从值给db变量保存请求的结果供以后使用。 

onerror的处理程序
发生错误事件时“onerror”被触发，如果打开数据库开数据库的过生库的过生库的过>Onupgradeneeded处理程序
如果你想更新数据库（创建，删除或修改数据库），那么你必须实现onupgradeneeded处理程店库中做任何更改。 在“onupgradeneeded”处理程序中是可以改变数据库的结构的唯一地方。 
创建和添加数据到表：IndexedDB使用对象存储来存储数据，而不是通而不是通而不是通过菡。在对象存储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码显示了并插入预先准备好的数据：


JavaScript

Kod
复制内容到剪贴板
request.onupgradeneeded
     = 
  1. fungsi(acara) {    var objectStore
  2.  = event.target.result.createObjectStore("users", {keyPath: "id "});    untuk (var i dalam Data pengguna) {   
  3. objectStore.add(userData[i]);    
  4. }   
  5. }  

  6. 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
    1. fungsi Tambah() {
    2. var permintaan = db.transaction(["users"], "readwrite").objectStore( "pengguna")
    3. .tambah({ id: "3", nama: "Gautam", umur: 30, e-mel: "gautam@store.org" });
    5. permintaan.tidak berjaya = fungsi(e) {
    6. alert("Gautam telah ditambahkan pada pangkalan data.");
      7. };
    9. request.onerror = fungsi(e) {
      10. alert("Tidak dapat menambah maklumat.");
    10. }
    12. }
      14. 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
    1. fungsi Read() {   
    2. var objectStore = db.transaction(["users"]).objectStore("users") ;   
    3. var permintaan = objectStore.get("2");   
    4. request.onerror = fungsi(acara) {   
    5. alert("Tidak dapat mendapatkan data dari pangkalan data!”);   
    6. };   
    7. permintaan.tidak berjaya = fungsi(acara) {    
    8. jika(request.result) {   
    9. makluman("Nama: "   request.result.name   ", Umur: "   request.result.age   ", Emel: "   request.result.email);   
    10. } lain {   
    11. alert("Bidulata tidak dapat ditemui dalam pangkalan data anda!”);    
    12. }   
    13. };   
    14. }  

     
    从表中读取所有数据
    下面的方法检索表中的所有数据里检索对象存储中的所有数据：

    JavaScript Kod复制内容到剪贴板
    1. fungsi ReadAll() {   
    2. var objectStore = db.transaction("users").objectStore("users");    
    3. var req = objectStore.openCursor();   
    4. req.tidak berjaya = fungsi(acara) {   
    5. db.close();   
    6. var res = acara.target.result;   
    7. jika (res) {   
    8. alert("Key "   res.key   " is "   res.value.name   ", Umur: "   res.value.age   ", E-mel: "   res.value.email);   
    9. res.continue();   
    10. }   
    11. };   
    12. req.onerror = fungsi (e) {   
    13. console.log("Ralat Mendapatkan: ", e);   
    14. };    
    15. }  

    该openCursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条>下面的方法从对象中删除记录。

    JavaScript Kod复制内容到剪贴板
    1. fungsi Alih Keluar() {
    2. var permintaan = db.transaction(["users"], "readwrite").objectStore( "pengguna").delete("1");
    3. permintaan.tidak berjaya = fungsi(acara) {
    4. alert("Entri Tapas telah dialih keluar daripada pangkalan data anda."
    5. };
    6. }

    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
    1. >  
    2. <kepala>  
    3. <meta http-equiv=" Jenis Kandungan" kandungan="teks/html;  charset=utf-8"  />  
    4. <tajuk>IndexedDBtajuk>  
    5. <skrip taip="teks/ javascript">  
    6. var indexedDB = tetingkap.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
    7.     
    8. //prefiks dari tetingkap.objek IDB   
    9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
    10. var IDBKeyRange = tetingkap.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
    11.     
    12. jika (!indexedDB) {   
    13. makluman("Pelayar anda tidak menyokong versi stabil IndexedDB.”)   
    14. }   
    15. var Data pelanggan = [   
    16. { id: "1", nama: "Tapas", umur: 33, e-mel: "tapas@example.com" },   
    17. { id: "2", nama: "Bidulata", umur: 55, e-mel: "bidu@home.com" }   
    18. ];   
    19. var db;   
    20. var permintaan = indexedDB.open("newDatabase", 1);   
    21.     
    22. request.onerror = fungsi(e) {   
    23. console.log("error: ", e);   
    24. };   
    25.     
    26. permintaan.tidak berjaya = fungsi(e) {   
    27. db = permintaan.hasil;   
    28. console.log("success: "  db);   
    29. };   
    30.     
    31. request.onupgradeneeded = fungsi(acara) {   
    32.     
    33. }  
    34. request.onupgradeneeded = fungsi(acara) {   
    35. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});   
    36. untuk (var i dalam Data pengguna) {   
    37. objectStore.add(userData[i]);    
    38. }   
    39. }   
    40. fungsi Tambah() {   
    41. var permintaan = db.transaction(["users"], "readwrite")   
    42. .objectStore("pengguna")   
    43. .add({ id: "3", nama: "Gautam", umur: 30, emel: "gautam@store.org" });   
    44.     
    45. permintaan.tidak berjaya = fungsi(e) {   
    46. alert("Gautam telah ditambahkan ke pangkalan data.”);   
    47. };   
    48.     
    49. request.onerror = fungsi(e) {   
    50. alert("Tidak dapat menambah maklumat.");    
    51. }   
    52.     
    53. }   
    54. fungsi Read() {   
    55. var objectStore = db.transaction("users").objectStore("users");   
    56. var permintaan = objectStore.get("2");   
    57. request.onerror = fungsi(acara) {   
    58. alert("Tidak dapat mendapatkan data dari pangkalan data!”);   
    59. };   
    60. permintaan.tidak berjaya = fungsi(acara) {    
    61. jika(request.result) {   
    62. makluman("Nama: "   request.result.name   ", Umur: "   request.result.age   ", Emel: "   request.result.email);   
    63. } lain {   
    64. alert("Bidulata tidak dapat ditemui dalam pangkalan data anda!”);    
    65. }   
    66. };   
    67. }  
    68. fungsi ReadAll() {   
    69. var objectStore = db.transaction("users").objectStore("users");    
    70. var req = objectStore.openCursor();   
    71. req.tidak berjaya = fungsi(acara) {   
    72. db.close();   
    73. var res = acara.target.result;   
    74. jika (res) {   
    75. alert("Key "   res.key   " is "   res.value.name   ", Umur: "   res.value.age   ", E-mel: "   res.value.email);   
    76. res.continue();   
    77. }   
    78. };   
    79. req.onerror = fungsi (e) {   
    80. console.log("Ralat Mendapatkan: ", e);   
    81. };    
    82. }   
    83. fungsi Alih Keluar() {    
    84. var permintaan = db.transaction(["users"], "readwrite").objectStore( "pengguna").delete("1");   
    85. permintaan.tidak berjaya = fungsi(acara) {   
    86. alert("Entri Tapas telah dialih keluar dari pangkalan data anda.");   
    87. };   
    88. }  
    89. skrip>  
    90. kepala>  
    91.     
    92. <badan>  
    93. <butang onklik="Tambah( )">Tambah rekodbutang>  
    94. <butang onklik="Alih keluar( )">Padam rekodbutang>  
    95. <butang onklik="Baca( )">Dapatkan satu rekodbutang>  
    96. <butang onklik="BacaSemua( )">Dapatkan semula semua rekodbutang>  
    97. badan>  
    98. html>  

    锁

    localStorage是不带lock功能的。那么要实现前端的数据共享并且需要lock功能那就需要共需要家比如indexedDB。indededDB使用的是事务处理的机制，那实际上就是lock功能。
    　　做这个测试需要先简单的封装下indexedDB的操作，因为indexedDB的连接比较麻烀单的封装下indexedDB的操作，因为indexedDB的连接比较麻烦而中中中文需要用到

    JavaScript Kod复制内容到剪贴板
    1. //db.js
    2. //Merangkum operasi transaksi
    3. IDBDatabase.prototype.doTransaction=fungsi(f){
    4. f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
    5. };
    6. //Sambung ke pangkalan data dan panggil fungsi utama selepas berjaya
    7. (fungsi(){
    8. //Buka pangkalan data
    9. var cn=indexedDB.open("TestDB",1);
      10. //Buat objek data
    11. cn.onupgradeneeded=fungsi(e){
      12. e.target.result.createObjectStore("Obj");
    12. };
    13. //Sambungan pangkalan data berjaya
      15. cn.tidak berjaya
    15. =fungsi(e){ utama(e.sasaran.hasil);
      16. };
      17. })();
      18. Kemudian terdapat dua halaman ujian
    19. <
      20. skrip
    20. src="db. js">skrip> <
      21. skrip
    21. > //a.html
      22. fungsi utama(e){
      23. (function callee(){
      24. //Mulakan transaksi
      25. e.doTransaction(function(e){
      26. e.put(1,"test"); //Tetapkan nilai ujian kepada 1
      27. e.put(2,"test"); //Tetapkan nilai ujian kepada 2
      28. });
      29. setTimeout(callee);
    29. })();
    30. };
    31. Skript>
    32. <script src="db. js">script>
    33. <Skript>
    34. //b.html
    35. Funktion main(e){
    36. (function callee(){
    37. //Eine Transaktion starten
    38. e.doTransaction(function(e){
    39. //Den Wert des Tests ermitteln
    40. e.get("test").onsuccess=function(e){
    41. console.log(e.target.result);
    42. };
    43. });
    44. setTimeout(callee);
    45. })();
    46. };
    47. 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.

Label berkaitan：
html5 indexeddb
sumber：php.cn
Artikel sebelumnya：Penjelasan terperinci tentang perbezaan antara div, bahagian dan artikel dalam kemahiran tutorial HTML5_html5 Artikel seterusnya：Ringkasan beberapa corak HTML5 (corak)_html5 kemahiran tutorial yang biasa digunakan
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan