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

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

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

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

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

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

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

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

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

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

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

var db;
var request = indexedDB.open("databaseName", 1);
request.onerror = 関数(e) {
console.log("error: ", e);
};
request.onsuccess = 関数(e) {
db = リクエスト.result;
console.log("success: " db);
};
request.onupgradeneeded = 関数(e) {
}

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

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

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

JavaScript
コード

复制内容到剪贴板

request.onupgradeneeded

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

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

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

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

関数 Add() {
var request = db.transaction(["users"], "readwrite").objectStore( "ユーザー")
.add({ id: "3"、名前: "Gautam"、年齢: 30、メールアドレス: "gautam@store.org" });
request.onsuccess = 関数(e) {
request.onerror = 関数(e) {

データベースで CRUD 操作 (読み取り、書き込み、変更) を行う前に、トランザクションを使用する必要がありました。 transaction()メソッドは、トランザクション処理を実行するオブジェクトストレージを指定するために使用されます。 transaction() メソッドは 3 つのパラメータを受け入れます (2 番目と 3 番目はオプションです)。 1 つ目は処理するオブジェクトストアのリスト、2 つ目は読み取り専用か読み書き可能かを指定、3 つ目はバージョンの変更です。

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

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

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

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

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

関数 ReadAll() {
var objectStore = db.transaction("users").objectStore("users");
var req = objectStore.openCursor();
req.onsuccess = 関数(イベント) {
db.close();
var res = event.target.result;
if (res) {
alert("Key " res.key " is " res.value.name ", 年齢: " res.value.age ", Email: " res.value.email);
res. continue();
}
};
req.onerror = 関数 (e) {
console.log("取得エラー: ", e);
};
}

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

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

JavaScript

コード

复制内容到剪贴板

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

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

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

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

>
<頭>
<メタ http-equiv=" Content-Type" content="text/html; />
<タイトル>IndexedDBタイトル>
<スクリプト type="text/ javascript">
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
//window.IDB オブジェクトのプレフィックス
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = ウィンドウ.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
if (!indexedDB) {
alert(「お使いのブラウザは、IndexedDB の安定バージョンをサポートしていません。」)
}
var customerData = [
{ id: 「1」、名前: 「Tapas」、年齢: 33、メール: 「tapas@example.com」 }、
{ id: 「2」、名前: 「Bidulata」、年齢: 55、メール: 「bidu@home.com」 }
];
var db;
var request = indexedDB.open("newDatabase", 1);
request.onerror = 関数(e) {
console.log("error: ", e);
};
request.onsuccess = 関数(e) {
db = リクエスト.result;
console.log("success: " db);
};
request.onupgradeneeded = 関数(イベント) {
}
request.onupgradeneeded = 関数(イベント) {
var objectStore = event.target.result.createObjectStore("users", {keyPath: "id "});
for (var i in userData) {
objectStore.add(userData[i]);
}
}
関数 Add() {
var request = db.transaction(["users"], "readwrite")
.objectStore("users")
.add({ id: "3", name: "Gautam", 年齢: 30, email: "gautam@store.org" });
request.onsuccess = 関数(e) {
alert("Gautam がデータベースに追加されました。");
};
request.onerror = 関数(e) {
alert("情報を追加できません。");
}
}
関数 Read() {
var objectStore = db.transaction("users").objectStore("users");
var request = objectStore.get("2");
request.onerror = 関数(イベント) {
alert("データベースからデータを取得できません!");
};
request.onsuccess = 関数(イベント) {
if(request.result) {
alert("名前: " request.result.name ", 年齢: " request.result.age ", メール: " request.result.email);
} else {
alert("データベース内で Bidulata が見つかりませんでした!");
}
};
}
関数 ReadAll() {
var objectStore = db.transaction("users").objectStore("users");
var req = objectStore.openCursor();
req.onsuccess = 関数(イベント) {
db.close();
var res = event.target.result;
if (res) {
alert("Key " res.key " is " res.value.name ", 年齢: " res.value.age ", Email: " res.value.email);
res. continue();
}
};
req.onerror = 関数 (e) {
console.log("取得エラー: ", e);
};
}
関数 Remove() {
var request = db.transaction(["users"], "readwrite").objectStore( "ユーザー").delete("1");
request.onsuccess = 関数(イベント) {
alert(「Tapas のエントリがデータベースから削除されました。」);
};
}
スクリプト>
頭>
<ボディ>
<ボタン onclick="追加( )">レコードを追加ボタン>
<ボタン onclick="削除( )">レコードを削除ボタン>
<ボタン onclick="Read( )">単一のレコードを取得ボタン>
<ボタン onclick="ReadAll( )">すべてのレコードを取得ボタン>
ボディ>
html>

锁

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

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

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

//db.js
//トランザクション操作をカプセル化します
IDBDatabase.prototype.doTransaction=function(f){
f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
cn=indexedDB.open("TestDB",1); //データオブジェクトを作成
=関数(e){ e.target.result.createObjectStore("Obj");
};
//データベース接続成功
=関数(e){ main(e.target.result);
};
})();
次に、2 つのテストページがあります
スクリプト src="db。 js">スクリプト> <
スクリプト> //a.html
関数 main(e){
(関数 callee(){
//トランザクションを開始します
e.doTransaction(function(e){
e.put(1,"test") //テストの値を 1 に設定します
e.put(2,"test") //テストの値を 2 に設定します
});
setTimeout(呼び出し先)
})();
};
script>
<script src="db. js">script>
<script>
//b.html
function main(e){
(function callee(){
//Start a transaction
e.doTransaction(function(e){
//Get the value of test
e.get("test").onsuccess=function(e){
console.log(e.target.result);
};
});
setTimeout(callee);
})();
};
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.