Analyse approfondie des compétences du didacticiel Database_html5 de l'index IndexedDB de HTML5

Introduction
IndexedDB est une base de données WEB HTML5 qui permet aux applications WEB HTML5 de stocker des données sur le navigateur de l'utilisateur. IndexedDB est très puissant et utile pour les applications. Il peut stocker une grande quantité de données dans les navigateurs Chrome, IE, Firefox et autres WEB du client. Voici une brève introduction aux concepts de base d'IndexedDB.

Qu'est-ce qu'IndexedDB
IndexedDB, le nouveau stockage de données de HTML5, peut stocker et exploiter des données sur le client, ce qui accélère le chargement des applications et leur permet de mieux répondre. Elle diffère d'une base de données relationnelle dans la mesure où elle contient des tables de données et des enregistrements. Cela affecte la façon dont nous concevons et créons des applications. IndexedDB crée des objets avec des types de données et des objets persistants JavaScript simples. Chaque objet peut avoir un index, ce qui permet d'interroger et de parcourir efficacement l'ensemble de la collection. Cet article vous donne un exemple concret de la façon d'utiliser IndexedDB dans une application Web.

Démarrer
Nous devons inclure le pré-code suivant avant l'exécution

JavaScript CodeCopier le contenu dans le presse-papiers

1. var indexedDB = window.indexedDB || window.mozIndexedDB || | window.msIndexedDB;
3. //préfixes des objets window.IDB
4. var IDBTransaction = fenêtre.IDBTransaction ||
5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
7. if (!indexedDB) {
8. alert("Votre navigateur ne prend pas en charge une version stable d'IndexedDB.")
9. }

Ouvrir IndexedDB
Avant de créer la base de données, nous devons d'abord créer des données pour la base de données Supposons que nous disposions des informations utilisateur suivantes : .

JavaScript CodeCopier le contenu dans le presse-papiers

1. var userData = [
2. { identifiant : "1", nom : "Tapas", âge : 33, email : "tapas@example.com" },
3. { identifiant : "2", nom : "Bidulata", âge : 55, email : "bidu@home.com" }
4. ];

Nous devons maintenant ouvrir notre base de données en utilisant la méthode open() :

JavaScript CodeCopier le contenu dans le presse-papiers

1. var db ;   
2. var request = indexedDB.open("databaseName", 1);   
3.     
4. request.onerror = fonction(e) {   
5. console.log("erreur : ", e);   
6. } ;   
7.     
8. request.onsuccess = fonction(e) {   
9. db = requête.result;   
10. console.log("success: "  db);   
11. } ;   
12. request.onupgradeneeded = fonction(e) {   
13.     
14. }  

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

onSuccess处理
发生成功事件时«onSuccess»被触发，如果所有成功的请求都在此处理，我们可以通过赋值给db变量保存请求的结果供以后使用。 

onerror的处理程序
发生错误事件时« onerror »被触发，如果打开数据库的过程中失败。 

Mise à niveau nécessaire处理程序
如果Il s'agit d'une mise à niveau nécessaire et d'une mise à niveau nécessaire.库中做任何更改。 在« onupgradeneeded »处理程序中是可以改变数据库的结构的唯一地方。 
创建和添加数据到表：
IndexedDB使用对象存储来存储数据，而不是通过表。 每当一个值存储在对象存储中，它与一个键相关联。 它允许我们创建的任何下面的代码显示了如何创建对象存储并插入预先准备好的数据：

JavaScript Code复制内容到剪贴板

1. request.onupgradeneeded = fonction(événement) {   
2. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});   
3. pour (var i dans userData) {   
4. objectStore.add(userData[i]);    
5. }   
6. }  

Nous créons un magasin d'objets en utilisant la méthode createObjectStore(). Cette méthode accepte deux paramètres : - le nom stocké et l'objet paramètre. Ici, nous avons un magasin d'objets appelé "utilisateurs" et définissons le keyPath, qui est l'attribut qui rend l'objet unique. Ici, nous utilisons "id" comme keyPath, cette valeur est unique dans le magasin d'objets et nous devons nous assurer que l'attribut de cet "ID" existe dans chaque objet du magasin d'objets. Une fois le magasin d'objets créé, nous pouvons commencer à y ajouter des données à l'aide d'une boucle for.

Ajouter manuellement des données au tableau :
Nous pouvons ajouter manuellement des données supplémentaires à la base de données.

JavaScript CodeCopier le contenu dans le presse-papiers

1. fonction Ajouter() {
2. var request = db.transaction(["users"], "readwrite").objectStore( "utilisateurs")
3. .add({ id : "3", nom : "Gautam", âge : 30, email : "gautam@store.org" });
5. request.onsuccess = fonction(e) {
6. alert("Gautam a été ajouté à la base de données.");
7. };
9. request.onerror = fonction(e) {
10. alert("Impossible d'ajouter les informations.");
11. }
13. }

Avant d'effectuer une opération CRUD (lecture, écriture, modification) dans la base de données, nous devions utiliser des transactions. La méthode transaction() est utilisée pour spécifier le stockage d'objets sur lequel nous souhaitons effectuer le traitement des transactions. La méthode transaction() accepte 3 paramètres (le deuxième et le troisième sont facultatifs). Le premier est la liste des magasins d'objets que nous voulons traiter, le second précise si nous voulons lire seule/lecture-écriture et le troisième est le changement de version.

Lecture des données d'une table
La méthode get() est utilisée pour récupérer des données depuis le stockage d'objets. Nous avons précédemment défini l'identifiant de l'objet comme keyPath, donc la méthode get() trouvera un objet avec la même valeur d'identifiant. Le code suivant renverra un objet que nous nommerons "Bidulata" :

JavaScript CodeCopier le contenu dans le presse-papiers

1. fonction Read() {   
2. var objectStore = db.transaction(["users"]).objectStore("users") ;   
3. var request = objectStore.get("2");   
4. request.onerror = fonction(événement) {   
5. alert("Impossible de récupérer les données de la base de données !" );   
6. } ;   
7. request.onsuccess = fonction(événement) {    
8. if(request.result) {   
9. alert("Nom : "   request.result.name   ", Âge : "   request.result.age   ", E-mail : "   request.result.email);   
10. } autre {   
11. alert("Bidulata n'a pas pu être trouvé dans votre base de données !");    
12. }   
13. } ;   
14. }  

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

JavaScript Code复制内容到剪贴板

1. fonction ReadAll() {   
2. var objectStore = db.transaction("users").objectStore("users");    
3. var req = objectStore.openCursor();   
4. req.onsuccess = fonction(événement) {   
5. db.close();   
6. var res = event.target.result;   
7. si (res) {   
8. alert("Key "   res.key   " est "   res.value.name   ", Âge : "   res.value.age   ", E-mail : "   res.value.email);   
9. res.continue();   
10. }   
11. } ;   
12. req.onerror = fonction (e) {   
13. console.log("Erreur d'obtention : ", e);   
14. } ;    
15. }  

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

JavaScript Code复制内容到剪贴板

1. fonction Supprimer() {
2. var request = db.transaction(["users"], "readwrite").objectStore( "utilisateurs").delete("1");
3. request.onsuccess = fonction(événement) {
4. alert("L'entrée de Tapas a été supprimée de votre base de données.");
5. };
6. }

Nous devons passer le keyPath de l'objet en tant que paramètre à la méthode delete().

Code final
La méthode suivante supprime un enregistrement de la source de l'objet :

JavaScript CodeCopier le contenu dans le presse-papiers

1. >  
2. <tête>  
3. <méta http-equiv=" Type de contenu" content="text/html;  charset=utf-8"  />  
4. <titre>IndexedDBtitre>  
5. <script type="texte/ javascript">  
6. var indexedDB = fenêtre.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || fenêtre.msIndexedDB ;   
7.     
8. //préfixes des objets window.IDB   
9. var IDBTransaction = fenêtre.IDBTransaction || window.webkitIDBTransaction || fenêtre.msIDBTransaction ;   
10. var IDBKeyRange = fenêtre.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
11.     
12. if (!indexedDB) {   
13. alert("Votre navigateur ne prend pas en charge une version stable de IndexedDB.")   
14. }   
15. var customerData = [   
16. { id :  "1", nom :  "Tapas", âge : 33, e-mail :  "tapas@example.com" },   
17. { id :  "2", nom :  "Bidulata", âge : 55, e-mail :  "bidu@home.com" }   
18. ];   
19. var db ;   
20. var request = indexedDB.open("newDatabase", 1);   
21.     
22. request.onerror = fonction(e) {   
23. console.log("erreur : ", e);   
24. } ;   
25.     
26. request.onsuccess = fonction(e) {   
27. db = requête.result;   
28. console.log("success: "  db);   
29. } ;   
30.     
31. request.onupgradeneeded = fonction(événement) {   
32.     
33. }  
34. request.onupgradeneeded = fonction(événement) {   
35. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});   
36. pour (var i dans userData) {   
37. objectStore.add(userData[i]);    
38. }   
39. }   
40. fonction Add() {   
41. var request = db.transaction(["users"], "readwrite")   
42. .objectStore("utilisateurs")   
43. .add({ id : "3", nom : "Gautam", âge : 30, e-mail : "gautam@store.org" });   
44.     
45. request.onsuccess = fonction(e) {   
46. alert("Gautam a été ajouté à la base de données.");   
47. } ;   
48.     
49. request.onerror = fonction(e) {   
50. alert("Impossible d'ajouter les informations.");    
51. }   
52.     
53. }   
54. fonction Read() {   
55. var objectStore = db.transaction("users").objectStore("users");   
56. var request = objectStore.get("2");   
57. request.onerror = fonction(événement) {   
58. alert("Impossible de récupérer les données de la base de données !" );   
59. } ;   
60. request.onsuccess = fonction(événement) {    
61. if(request.result) {   
62. alert("Nom : "   request.result.name   ", Âge : "   request.result.age   ", E-mail : "   request.result.email);   
63. } autre {   
64. alert("Bidulata n'a pas pu être trouvé dans votre base de données !");    
65. }   
66. } ;   
67. }  
68. fonction ReadAll() {   
69. var objectStore = db.transaction("users").objectStore("users");    
70. var req = objectStore.openCursor();   
71. req.onsuccess = fonction(événement) {   
72. db.close();   
73. var res = event.target.result;   
74. si (res) {   
75. alert("Key "   res.key   " est "   res.value.name   ", Âge : "   res.value.age   ", E-mail : "   res.value.email);   
76. res.continue();   
77. }   
78. } ;   
79. req.onerror = fonction (e) {   
80. console.log("Erreur d'obtention : ", e);   
81. } ;    
82. }   
83. fonction Remove() {    
84. var request = db.transaction(["users"], "readwrite").objectStore( "utilisateurs").delete("1");   
85. request.onsuccess = fonction(événement) {   
86. alert("L'entrée de Tapas a été supprimée de votre base de données.");   
87. } ;   
88. }  
89. script>  
90. tête>  
91.     
92. <corps>  
93. <bouton onclique="Ajouter( )">Ajouter un enregistrementbouton>  
94. <bouton onclique="Supprimer( )">Supprimer l'enregistrementbouton>  
95. <bouton onclique="Lire( )">Récupérer un enregistrement uniquebouton>  
96. <bouton onclique="LireTout( )">Récupérer tous les enregistrementsbouton>  
97. corps>  
98. html>  

锁

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

JavaScript Code复制内容到剪贴板

1. //db.js
2. //Encapsuler les opérations de transaction
3. IDBDatabase.prototype.doTransaction=fonction(f){
4. f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
5. };
6. //Connectez-vous à la base de données et appelez la fonction principale après succès
7. (fonction(){
8. //Ouvrez la base de données
9. var cn=indexedDB.open("TestDB",1
10. //Créer un objet de données
11. cn.onupgradeneeded=fonction(e){
12. e.target.result.createObjectStore("Obj");
13. };
14. //Connexion à la base de données réussie
15. cn.onsuccess=fonction(e){
16. main(e.target.result);
17. };
18. })();
19. Ensuite il y a deux pages de test
20. <script src="db. js">script>
21. <script>
22. //a.html
23. fonction principale(e){
24. (fonction appelée(){
25. //Démarrer une transaction
26. e.doTransaction(function(e){
27. e.put(1,"test"); //Définissez la valeur de test sur 1
28. e.put(2,"test"); //Définissez la valeur de test sur 2
29. });
30. setTimeout(appelé);
31. })();
32. };
33. スクリプト>
34. <スクリプト src="db。 js">スクリプト>
35. <スクリプト>
36. //b.html
37. 関数 main(e){
38. (関数 callee(){
39. //トランザクションを開始します
40. e.doTransaction(function(e){
41. //テストの値を取得します
42. e.get("test").onsuccess=function(e){
43. console.log(e.target.result);
44. };
45. });
46. setTimeout(呼び出し先)
;
47. })();
48. };
49. スクリプト>

localStorage を IndexedDB トランザクション処理に置き換えます。しかし結果は違います

テスト中は、indexedDB が a.html の処理でビジーであり、b.html トランザクションがトランザクション キューで待機しているため、b.html に即時出力がない可能性があります。しかし、どうやっても出力結果は値 1 にはなりません。 IndexedDB の最小の処理単位はトランザクションであり、localStorage のような式ではないためです。このように、ロックとロック解除の間に処理が必要なものだけをトランザクションに入れるだけで済みます。さらに、indexedDB に対するブラウザのサポートは localStorage ほど優れていないため、使用する場合はブラウザの互換性を考慮する必要があります。