Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Eingehende Analyse der Tutorialfähigkeiten der IndexedDB-Indexdatenbank_html5 von HTML5

WBOY
Freigeben： 2016-05-16 15:46:20
Original
1454 Leute haben es durchsucht

Einführung
IndexedDB ist eine HTML5-WEB-Datenbank, die es HTML5-WEB-Anwendungen ermöglicht, Daten im Browser des Benutzers zu speichern. IndexedDB ist sehr leistungsstark und nützlich für Anwendungen. Es kann große Datenmengen in Chrome, IE, Firefox und anderen WEB-Browsern speichern. Hier finden Sie eine kurze Einführung in die Grundkonzepte von IndexedDB.

Was ist IndexedDB?
IndexedDB, der neue Datenspeicher von HTML5, kann Daten auf dem Client speichern und verwalten, wodurch Anwendungen schneller geladen werden und besser reagieren. Sie unterscheidet sich von einer relationalen Datenbank dadurch, dass sie über Datentabellen und Datensätze verfügt. Es beeinflusst die Art und Weise, wie wir Anwendungen entwerfen und erstellen. IndexedDB erstellt Objekte mit Datentypen und einfachen persistenten JavaScript-Objekten. Jedes Objekt kann einen Index haben, wodurch die gesamte Sammlung effizient abgefragt und durchlaufen werden kann. In diesem Artikel finden Sie ein reales Beispiel für die Verwendung von IndexedDB in einer Webanwendung.

Start
Wir müssen vor der Ausführung den folgenden Vorcode einfügen

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. var indexedDB = window.indexedDB ||. window.mozIndexedDB || |. window.msIndexedDB;
  3. //Präfixe von window.IDB-Objekten
  4. var IDBTransactionwindow.IDBTransaction ||. window.msIDBTransaction; var
  5. IDBKeyRange = window.IDBKeyRange ||. window.msIDBKeyRange
  6. if (!indexedDB) {
  7. alert("Ihr Browser unterstützt keine stabile Version von IndexedDB.")
  8. }
IndexedDB öffnen


Bevor wir die Datenbank erstellen, müssen wir zunächst Daten für die Datenbank erstellen:

JavaScript
CodeInhalt in die Zwischenablage kopieren
    var
  1. userData = [ { id: „1“, Name: „Tapas“, Alter: 33, E-Mail: „tapas@example.com“ },
  2. { id: „2“, Name: „Bidulata“, Alter: 55, E-Mail: „bidu@home.com“ }
  3. ];
Jetzt müssen wir unsere Datenbank mit der open()-Methode öffnen:

JavaScript
CodeInhalt in die Zwischenablage kopieren
  1. var db;   
  2. var request = indexedDB.open("databaseName", 1);   
  3.     
  4. request.onerror = function(e) {   
  5. console.log("error: ", e);   
  6. };   
  7.     
  8. request.onsuccess = function(e) {   
  9. db = request.result;   
  10. console.log("success: "  db);   
  11. };   
  12. request.onupgradeneeded = Funktion(e) {   
  13.     
  14. }  

如上所示，我们已经打开了名为"databaseName"，指定版本号的数据库，open()方法有两个参数：
1.第一个参数是数据库名称, 它会检测名称为„databaseName“的数据库是否已经存在, 如果存在则打开它, 否则创建新的数据库.
2.第二个参数是数据库的版本，用于用户更新数据库结构.
 
onSuccess 处理赋值给db变量保存请求的结果供以后使用.
 
onerror的处理程序
发生错误事件时“onerror“被触发，如果打开数据库的过程中失败.
 
Onupgradeneeded处理程序
如果你想更更新数据库（创建,删除或修改数据库）,那么你必须实现onupgradeneeded处理程序,使您可以在数据库中做任何更改. 在„onupgradeneeded“处理程序中是可以改变数据库的结构的唯一地方.
 创建和添加数据到表:
IndexedDB使用对象存储来存储数据，而不是通过表。 每当一个值存储在对象存储中,它与一个键相关联. 它允许我们创建的任何索引允许我们访问存储在对象存储中的值储并插入预先准备好的数据:

JavaScript Code复制内容到剪贴板
  1. request.onupgradeneeded = Funktion(Ereignis) {   
    2. var 
  2. objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});   
    3. für (var i in userData) {   
    4. objectStore.add(userData[i]);    
    5. }   
    6. }  

Wir erstellen einen Objektspeicher mit der Methode createObjectStore(). Diese Methode akzeptiert zwei Parameter: - den gespeicherten Namen und das Parameterobjekt. Hier haben wir einen Objektspeicher namens „users“ und definieren den keyPath, das Attribut, das das Objekt einzigartig macht. Hier verwenden wir „id“ als keyPath, dieser Wert ist im Objektspeicher eindeutig und wir müssen sicherstellen, dass das Attribut dieser „ID“ in jedem Objekt im Objektspeicher vorhanden ist. Sobald der Objektspeicher erstellt ist, können wir mit dem Hinzufügen von Daten mithilfe einer for-Schleife beginnen.

Daten manuell zur Tabelle hinzufügen:
Wir können der Datenbank manuell zusätzliche Daten hinzufügen.

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. Funktion Add() {
  2. var request = db.transaction(["users"], "readwrite").objectStore( „Benutzer“)
  3. .add({ id: „3“, Name: „Gautam“, Alter: 30, E-Mail: „gautam@store.org“ });
  5. request.onsuccess = function(e) {
    6. alert("Gautam wurde zur Datenbank hinzugefügt.");
    7. };
  9. request.onerror = function(e) {
    10. alert("Die Informationen können nicht hinzugefügt werden.");
    11. }
    13. }
Bevor wir eine CRUD-Operation (Lesen, Schreiben, Ändern) in der Datenbank durchführten, mussten wir Transaktionen verwenden. Die Methode „transaktion()“ wird verwendet, um den Objektspeicher anzugeben, den wir für die Transaktionsverarbeitung durchführen möchten. Die Methode „transaktion()“ akzeptiert drei Parameter (der zweite und dritte sind optional). Die erste ist die Liste der Objektspeicher, die wir verarbeiten möchten, die zweite gibt an, ob wir nur lesen/lesen/schreiben möchten, und die dritte ist die Versionsänderung.


Daten aus einer Tabelle lesen
Die Methode get() wird verwendet, um Daten aus dem Objektspeicher abzurufen. Wir haben zuvor die ID des Objekts als keyPath festgelegt, sodass die Methode get() ein Objekt mit demselben ID-Wert findet. Der folgende Code gibt ein Objekt mit dem Namen „Bidulata“ zurück:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. Funktion Read() {   
  2. var objectStore = db.transaction(["users"]).objectStore("users") ;   
  3. var request = objectStore.get("2");   
  4. request.onerror = function(event) {   
  5. alert("Daten können nicht aus der Datenbank abgerufen werden!");   
  6. };   
  7. request.onsuccess = Funktion(Ereignis) {    
  8. if(request.result) {   
  9. alert("Name: "   request.result.name   ", Alter: "   request.result.age   ", E-Mail: "   request.result.email);   
  10. } else {   
  11. alert("Bidulata konnte nicht in Ihrer Datenbank gefunden werden!");    
  12. }   
  13. };   
  14. }  

 
从表中读取所有数据
下面的方法检索表中的所有数据。 这里我们使用游标来检索对象存储中的所有数据:

JavaScript Code复制内容到剪贴板
  1. Funktion ReadAll() {   
  2. var objectStore = db.transaction("users").objectStore("users");    
  3. var req = objectStore.openCursor();   
  4. req.onsuccess = function(event) {   
  5. db.close();   
  6. var res = event.target.result;   
  7. if (res) {   
  8. alert("Key "   res.key   " is "   res.value.name   ", Age: "   res.value.age   ", Email: "   res.value.email);   
  9. res.continue();   
  10. }   
  11. };   
  12. req.onerror = function (e) {   
  13. console.log("Fehler beim Abrufen: ", e);   
  14. };    
  15. }  

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

JavaScript Code复制内容到剪贴板
  1. Funktion Remove() {
  2. var request = db.transaction(["users"], "readwrite").objectStore( "Benutzer").delete("1");
  3. request.onsuccess = Funktion(Ereignis) {
  4. alert("Tapas' Eintrag wurde aus Ihrer Datenbank entfernt.");
    5. };
    6. }
Wir müssen den keyPath des Objekts als Parameter an die Methode delete() übergeben.

Endgültiger Code
Die folgende Methode löscht einen Datensatz aus der Objektquelle:

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <Kopf>  
  3. <meta http-equiv=" Content-Type" content="text/html;  charset=utf-8"  />  
  4. <title>IndexedDBTitel>  
  5. <script type="text/ Javascript">  
  6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
  7.     
  8. //Präfixe von window.IDB-Objekten   
  9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
  10. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
  11.     
  12. if (!indexedDB) {   
  13. alert("Ihr Browser unterstützt keine stabile Version von IndexedDB.")   
  14. }   
  15. var customerData = [   
  16. { id: "1", Name: "Tapas", Alter: 33, E-Mail: "tapas@example.com" },   
  17. { id: "2", Name: "Bidulata", Alter: 55, E-Mail: "bidu@home.com" }   
  18. ];   
  19. var db;   
  20. var request = indexedDB.open("newDatabase", 1);   
  21.     
  22. request.onerror = function(e) {   
  23. console.log("error: ", e);   
  24. };   
  25.     
  26. request.onsuccess = function(e) {   
  27. db = request.result;   
  28. console.log("success: "  db);   
  29. };   
  30.     
  31. request.onupgradeneeded = Funktion(Ereignis) {   
  32.     
  33. }  
  34. request.onupgradeneeded = Funktion(Ereignis) {   
  35. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});   
  36. für (var i in userData) {   
  37. objectStore.add(userData[i]);    
  38. }   
  39. }   
  40. Funktion Add() {   
  41. var request = db.transaction(["users"], "readwrite")   
  42. .objectStore("users")   
  43. .add({ id: "3", Name: "Gautam", Alter: 30, E-Mail: "gautam@store.org" });   
  44.     
  45. request.onsuccess = function(e) {   
  46. alert("Gautam wurde der Datenbank hinzugefügt.");   
  47. };   
  48.     
  49. request.onerror = function(e) {   
  50. alert("Die Informationen konnten nicht hinzugefügt werden.");    
  51. }   
  52.     
  53. }   
  54. Funktion Read() {   
  55. var objectStore = db.transaction("users").objectStore("users");   
  56. var request = objectStore.get("2");   
  57. request.onerror = function(event) {   
  58. alert("Daten können nicht aus der Datenbank abgerufen werden!");   
  59. };   
  60. request.onsuccess = Funktion(Ereignis) {    
  61. if(request.result) {   
  62. alert("Name: "   request.result.name   ", Alter: "   request.result.age   ", E-Mail: "   request.result.email);   
  63. } else {   
  64. alert("Bidulata konnte nicht in Ihrer Datenbank gefunden werden!");    
  65. }   
  66. };   
  67. }  
  68. Funktion ReadAll() {   
  69. var objectStore = db.transaction("users").objectStore("users");    
  70. var req = objectStore.openCursor();   
  71. req.onsuccess = function(event) {   
  72. db.close();   
  73. var res = event.target.result;   
  74. if (res) {   
  75. alert("Key "   res.key   " is "   res.value.name   ", Age: "   res.value.age   ", Email: "   res.value.email);   
  76. res.continue();   
  77. }   
  78. };   
  79. req.onerror = function (e) {   
  80. console.log("Fehler beim Abrufen: ", e);   
  81. };    
  82. }   
  83. Funktion Remove() {    
  84. var request = db.transaction(["users"], "readwrite").objectStore( "Benutzer").delete("1");   
  85. request.onsuccess = Funktion(Ereignis) {   
  86. alert("Der Eintrag von Tapas wurde aus Ihrer Datenbank entfernt.");   
  87. };   
  88. }  
  89. Skript>  
  90. Kopf>  
  91.     
  92. <Körper>  
  93. <button onclick="Add( )">Datensatz hinzufügenSchaltfläche>  
  94. <Schaltfläche onclick="Entfernen( )">Datensatz löschenSchaltfläche>  
  95. <Schaltfläche onclick="Lesen( )">Einzelnen Datensatz abrufenSchaltfläche>  
  96. <button onclick="ReadAll( )">Alle Datensätze abrufenSchaltfläche>  
  97. Körper>  
  98. html>  

锁

localStorage是不带lock功能的.那就需要使用其它本储存方式,比如indexedDB.indedDB使用的是事务处理的机制,那实际上就是lock功能。
　　做这个测试需要先简单的封装下indexedDB的操作, 因为indexedDB的连接比较麻烦，而且两个测试页面都需要用到

JavaScript Code复制内容到剪贴板
  1. //db.js
  2. //Transaktionsvorgänge kapseln
  3. IDBDatabase.prototype.doTransaction=Funktion(f){
  4. f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
    5. };
    6. //Stellen Sie eine Verbindung zur Datenbank her und rufen Sie nach Erfolg die Hauptfunktion auf
    7. (function(){
    8. //Datenbank öffnen
    9. var
  9. cn=indexedDB.open("TestDB",1); //Datenobjekt erstellen
    11. cn.onupgradeneeded
  11. =function(e){ e.target.result.createObjectStore("Obj");
    12. };
    13. //Datenbankverbindung erfolgreich
  14. cn.onsuccess
    15. =
  15. function(e){ main(e.target.result);
    16. };
    17. })();
    18. Dann gibt es noch zwei Testseiten
  19. <
    20. script
  20. src="db. js">script> <
    21. Skript
  21. > //a.html
    22. Funktion main(e){
    23. (function callee(){
    24. //Eine Transaktion starten
    25. e.doTransaction(function(e){
    26. e.put(1,"test"); //Setze den Wert von test auf 1
    27. e.put(2,"test"); //Setze den Wert von test auf 2
    28. });
    29. setTimeout(callee);
    30. })();
    31. };
  31. script>
  32. <script src="db. js">script>
  33. <script>
  34. //b.html
  35. fonction principale(e){
  36. (fonction appelée(){
  37. //Démarrer une transaction
  38. e.doTransaction(function(e){
  39. //Obtenir la valeur du test
  40. e.get("test").onsuccess=fonction(e){
  41. console.log(e.target.result);
  42. };
  43. });
  44. setTimeout(appelé);
  45. })();
  46. };
  47. script>

Remplacez localStorage par le traitement des transactions indexedDB. Mais le résultat est différent

Pendant le test, il se peut qu'il n'y ait pas de sortie immédiate dans b.html car indexedDB est occupé à traiter les éléments a.html et la transaction b.html est en attente dans la file d'attente des transactions. Quoi qu’il en soit, le résultat de sortie ne sera pas la valeur 1. Parce que la plus petite unité de traitement d'indexedDB est une transaction, pas une expression comme localStorage. De cette façon, il vous suffit de mettre dans une transaction les éléments qui doivent être traités entre le verrouillage et le déverrouillage. De plus, la prise en charge par le navigateur d'indexedDB n'est pas aussi bonne que celle de localStorage, la compatibilité du navigateur doit donc être prise en compte lors de son utilisation.

Verwandte Etiketten：
html5 indexeddb
Quelle：php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Unterschiede zwischen Div, Abschnitt und Artikel im HTML5_HTML5-Tutorial Nächster Artikel：Zusammenfassung einiger häufig verwendeter HTML5-Muster (Muster)_HTML5-Tutorialfähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage