HTML5 の IndexedDB インデックスの詳細な分析データベース_html5 チュートリアル スキル

概要
IndexedDB は、HTML5 WEB アプリケーションがユーザーのブラウザ上にデータを保存できるようにする HTML5 WEB データベースです。 IndexedDB は非常に強力で、クライアントの Chrome、IE、Firefox、その他の WEB ブラウザに大量のデータを保存できます。ここでは、IndexedDB の基本概念を簡単に説明します。

IndexedDB とは
HTML5 の新しいデータ ストレージである IndexedDB は、クライアント上でデータを保存および操作できるため、アプリケーションの読み込みが速くなり、応答性が向上します。データ テーブルとレコードがあるという点でリレーショナル データベースとは異なります。それはアプリケーションの設計と作成の方法に影響を与えます。 IndexedDB は、データ型と単純な JavaScript 永続オブジェクトを使用してオブジェクトを作成します。各オブジェクトはインデックスを持つことができるため、コレクション全体のクエリと走査が効率的に行えます。この記事では、Web アプリケーションで IndexedDB を使用する方法の実例を示します。

開始
実行前に次のプリコードを含める必要があります

JavaScript コードコンテンツをクリップボードにコピーします

1. var indexedDB = window.indexedDB || window.webkitIndexedDB | | window.msIndexedDB;
3. //window.IDB オブジェクトのプレフィックス
4. var IDBTransaction = window.IDBTransaction || window.msIDBTransaction;
5. var IDBKeyRange = window.IDBKeyRange || window.msIDBKeyRange
7. if (!indexedDB) {
8. alert("お使いのブラウザは IndexedDB の安定バージョンをサポートしていません。")
9. }

Open IndexedDB
データベースを作成する前に、まずデータベースのデータを作成する必要があります。

JavaScript コードコンテンツをクリップボードにコピーします

1. var userData = [
2. { id: "1"、名前: "Tapas"、年齢: 33、メール: "tapas@example.com" }、
3. { id: "2"、名前: "Bidulata"、年齢: 55、メール: "bidu@home.com" }
4. ];

次に、open() メソッドを使用してデータベースを開く必要があります。

JavaScript コードコンテンツをクリップボードにコピーします

1. var db;   
2. var request = indexedDB.open("databaseName", 1);   
4. request.onerror = 関数(e) {
5. console.log("error: ", e);   
6. };   
8. request.onsuccess = 関数(e) {
9. db = リクエスト.result;   
10. console.log("success: " db);   
11. };   
12. request.onupgradeneeded = 関数(e) {
14. }

上に示したように、私たちは "databaseName" という名前を付け、バージョン番号のデータベースを指定し、open() メソッドに 2 つのパラメータがあります:
1.最初のパラメータはデータベース名、会議名は「databaseName」のデータベースが存在するかどうか。存在する場合はそれを開き、新しいデータベースを作成します。
2. 2 番目のパラメータは、ユーザーがデータベース構造を更新するために使用されるデータベースのバージョンです。 >onSuccess 処理

成功イベントが発生すると、「onSuccess」がトリガーされ、すべての成功したリクエストがこの処理に存在する場合、データベースの保存リクエストの結果を提供して使用できます。 onerror の処理プログラム
は、データベースを開くプロセス中にエラーが発生した場合に「onerror」が起動されます。

Onupgradeneeded 処理プログラム
データベースの更新 (データベースの作成、削除、または変更) を行う場合は、データベースの構造を変更できるようにするために、アップグレードが必要な処理プログラムを実行する必要があります。 🎜 >
创建和添加数据到表：
indexeddbインデックスは、オブジェクトを保存し、事前に準備したデータをどのように挿入するかを示しています。

JavaScript
コード

复制内容到剪贴板

request.onupgradeneeded

=

関数
1. (イベント) { var objectStore =
2. event.target.result.createObjectStore("users", {keyPath: "id "});    for (var i in userData) { objectStore.add(userData[i]);    
3. }
4. }

createObjectStore() メソッドを使用してオブジェクト ストアを作成します。 このメソッドは、保存された名前とパラメータ オブジェクトの 2 つのパラメータを受け入れます。 ここでは、「users」というオブジェクト ストアがあり、オブジェクトを一意にする属性である keyPath を定義しています。 ここでは、keyPath として「id」を使用します。この値はオブジェクト ストア内で一意であり、この「ID」の属性がオブジェクト ストア内のすべてのオブジェクトに存在することを確認する必要があります。 オブジェクト ストアが作成されたら、for ループを使用してオブジェクト ストアへのデータの追加を開始できます。

テーブルにデータを手動で追加します:
追加のデータをデータベースに手動で追加できます。

JavaScript コードコンテンツをクリップボードにコピーします
1. 関数 Add() {
2. var request = db.transaction(["users"], "readwrite").objectStore( "ユーザー")
3. .add({ id: "3"、名前: "Gautam"、年齢: 30、メールアドレス: "gautam@store.org" });
5. request.onsuccess = 関数(e) {
alert("Gautam がデータベースに追加されました。");
};
9. request.onerror = 関数(e) {
alert("情報を追加できません。");
}
}
データベースで CRUD 操作 (読み取り、書き込み、変更) を行う前に、トランザクションを使用する必要がありました。 transaction()メソッドは、トランザクション処理を実行するオブジェクトストレージを指定するために使用されます。 transaction() メソッドは 3 つのパラメータを受け入れます (2 番目と 3 番目はオプションです)。 1 つ目は処理するオブジェクト ストアのリスト、2 つ目は読み取り専用か読み書き可能かを指定、3 つ目はバージョンの変更です。


テーブルからのデータの読み取り
get() メソッドは、オブジェクト ストレージからデータを取得するために使用されます。 事前にオブジェクトの ID を keyPath として設定しているため、get() メソッドは同じ ID 値を持つオブジェクトを検索します。 次のコードは、「Bidulata」という名前のオブジェクトを返します:


JavaScript コードコンテンツをクリップボードにコピーします

1. 関数 Read() {
2. var objectStore = db.transaction(["users"]).objectStore("users") ;   
3. var request = objectStore.get("2");   
4. request.onerror = 関数(イベント) {
5. alert("データベースからデータを取得できません!");   
6. };   
7. request.onsuccess = 関数(イベント) {
8. if(request.result) {
9. alert("名前: " request.result.name ", 年齢: " request.result.age ", メール: " request.result.email);   
10. } else {
11. alert("データベース内で Bidulata が見つかりませんでした!");    
12. }
13. };   
14. }


テーブル内のすべてのデータを取得します
の次の方法でテーブル内のすべてのデータを取得します。

JavaScript コード复制内容到剪贴板

1. 関数 ReadAll() {
2. var objectStore = db.transaction("users").objectStore("users");    
3. var req = objectStore.openCursor();   
4. req.onsuccess = 関数(イベント) {
5. db.close();   
6. var res = event.target.result;   
7. if (res) {
8. alert("Key " res.key " is " res.value.name ", 年齢: " res.value.age ", Email: " res.value.email);   
9. res. continue();   
10. }
11. };   
12. req.onerror = 関数 (e) {
13. console.log("取得エラー: ", e);   
14. };    
15. }

この openCursor() は、データベース内の多くの承認を実行するために使用されます。 continue() 関数内で次の 1 条の承認を継続的に取得します。

オブジェクトから削除されます。

JavaScript

コード

复制内容到剪贴板

1. 関数 Remove() {
2. var request = db.transaction(["users"], "readwrite").objectStore( "ユーザー").delete("1");
3. request.onsuccess = 関数(イベント) {
4. alert("Tapas のエントリがデータベースから削除されました。");
5. };
6. }

オブジェクトの keyPath をパラメータとして delete() メソッドに渡す必要があります。

最終コード
次のメソッドはオブジェクト ソースからレコードを削除します:

JavaScript コードコンテンツをクリップボードにコピーします

1. >
2. <頭>
3. <メタ http-equiv=" Content-Type" content="text/html; />
4. <タイトル>IndexedDBタイトル>
5. <スクリプト type="text/ javascript">
6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
8. //window.IDB オブジェクトのプレフィックス
9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
10. var IDBKeyRange = ウィンドウ.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
12. if (!indexedDB) {
13. alert(「お使いのブラウザは、IndexedDB の安定バージョンをサポートしていません。」)
14. }
15. var customerData = [
16. { id: 「1」、名前: 「Tapas」、 年齢: 33、メール: 「tapas@example.com」 }、
17. { id: 「2」、名前: 「Bidulata」、年齢: 55、メール: 「bidu@home.com」 }
18. ];   
19. var db;   
20. var request = indexedDB.open("newDatabase", 1);   
22. request.onerror = 関数(e) {
23. console.log("error: ", e);   
24. };   
26. request.onsuccess = 関数(e) {
27. db = リクエスト.result;   
28. console.log("success: " db);   
29. };   
31. request.onupgradeneeded = 関数(イベント) {
33. }  
34. request.onupgradeneeded = 関数(イベント) {
35. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});   
36. for (var i in userData) {
37. objectStore.add(userData[i]);    
38. }
39. }
40. 関数 Add() {
41. var request = db.transaction(["users"], "readwrite")
42. .objectStore("users")
43. .add({ id: "3", name: "Gautam", 年齢: 30, email: "gautam@store.org" });   
45. request.onsuccess = 関数(e) {
46. alert("Gautam がデータベースに追加されました。");   
47. };   
49. request.onerror = 関数(e) {
50. alert("情報を追加できません。");    
51. }
53. }
54. 関数 Read() {
55. var objectStore = db.transaction("users").objectStore("users");   
56. var request = objectStore.get("2");   
57. request.onerror = 関数(イベント) {
58. alert("データベースからデータを取得できません!");   
59. };   
60. request.onsuccess = 関数(イベント) {
61. if(request.result) {
62. alert("名前: " request.result.name ", 年齢: " request.result.age ", メール: " request.result.email);   
63. } else {
64. alert("データベース内で Bidulata が見つかりませんでした!");    
65. }
66. };   
67. }  
68. 関数 ReadAll() {
69. var objectStore = db.transaction("users").objectStore("users");    
70. var req = objectStore.openCursor();   
71. req.onsuccess = 関数(イベント) {
72. db.close();   
73. var res = event.target.result;   
74. if (res) {
75. alert("Key " res.key " is " res.value.name ", 年齢: " res.value.age ", Email: " res.value.email);   
76. res. continue();   
77. }
78. };   
79. req.onerror = 関数 (e) {
80. console.log("取得エラー: ", e);   
81. };    
82. }
83. 関数 Remove() {
84. var request = db.transaction(["users"], "readwrite").objectStore( "ユーザー").delete("1");   
85. request.onsuccess = 関数(イベント) {
86. alert(「Tapas のエントリがデータベースから削除されました。」);   
87. };   
88. }  
89. スクリプト>
90. 頭>
92. <ボディ>
93. <ボタン onclick="追加( )">レコードを追加ボタン>
94. <ボタン onclick="削除( )">レコードを削除ボタン>
95. <ボタン onclick="Read( )">単一のレコードを取得ボタン>
96. <ボタン onclick="ReadAll( )">すべてのレコードを取得ボタン>
97. ボディ>
98. html>

锁

localStorage にはロック機能がありません。フロントエンドのデータ共有を実現するためにロック機能が必要な場合は、インデックス付き DB などの他の格納方式を使用する必要があります。indededDB は、実際にはロック機能です。
このような検索を行うには、indexedDB の接続が難しいため、最初に単一のインデックス付き DB をカプセル化する操作が必要であり、2 つの検索の面では


を使用する必要があります。

JavaScript コード复制内容到剪贴板

1. //db.js
2. //トランザクション操作をカプセル化します
3. IDBDatabase.prototype.doTransaction=function(f){
4. f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
};
//データベースに接続し、成功後に main 関数を呼び出します
(function(){
//データベースを開きます
var
9. cn=indexedDB.open("TestDB",1); //データオブジェクトを作成
cn.onupgradeneeded
11. =関数(e){ e.target.result.createObjectStore("Obj");
12. };
13. //データベース接続成功
cn.onsuccess
15. =関数(e){ main(e.target.result);
16. };
17. })();
18. 次に、2 つのテスト ページがあります
<
20. スクリプト src="db。 js">スクリプト> <
21. スクリプト> //a.html
22. 関数 main(e){
23. (関数 callee(){
24. //トランザクションを開始します
25. e.doTransaction(function(e){
26. e.put(1,"test") //テストの値を 1 に設定します
;
27. e.put(2,"test") //テストの値を 2 に設定します
;
28. });
29. setTimeout(呼び出し先)
;
30. })();
31. };
32. script>
33. <script src="db. js">script>
34. <script>
35. //b.html
36. function main(e){
37. (function callee(){
38. //Start a transaction
39. e.doTransaction(function(e){
40. //Get the value of test
41. e.get("test").onsuccess=function(e){
42. console.log(e.target.result);
43. };
44. });
45. setTimeout(callee);
46. })();
47. };
48. script>

Replace localStorage with indexedDB transaction processing. But the result is different



During the test, there may not be immediate output in b.html because indexedDB is busy processing a.html things, and the b.html transaction is waiting in the transaction queue. But no matter what, the output result will not be the value 1. Because the smallest processing unit of indexedDB is a transaction, not an expression like localStorage. In this way, you only need to put the things that need to be processed between lock and unlock into a transaction. In addition, browser support for indexedDB is not as good as localStorage, so browser compatibility must be considered when using it.