IndexedDB API
概要
ブラウザの機能が向上し続けるにつれ、ますます多くの Web サイトがクライアントに大量のデータを保存することを検討し始めています。これにより、サーバーからデータを取得する必要性が減り、ローカルで直接データを取得できるようになります。
既存のブラウザー データ ストレージ ソリューションは、大量のデータの保存には適していません。Cookie のサイズは 4KB を超えず、リクエストごとにサーバーに送り返されます。LocalStorage は 2.5MB ～ 10MB であり (ブラウザーによって異なります)、検索は提供されません。機能はありますが、カスタム インデックスを作成することはできません。したがって、新しいソリューションが必要であり、これが IndexedDB が誕生した背景です。
平たく言えば、IndexedDB はブラウザによって提供されるローカル データベースであり、Web スクリプトによって作成および操作できます。 IndexedDB は大量のデータの保存を可能にし、検索インターフェイスを提供し、インデックスを作成することもできます。これらは LocalStorage にはないものです。データベースの種類に関して言えば、IndexedDB はリレーショナル データベースではなく (SQL クエリ ステートメントをサポートしていません)、NoSQL データベースに近いものです。
IndexedDB には以下の特徴があります。
**(1) キーと値のペアのストレージ。 ** IndexedDB は内部でオブジェクト ストアを使用してデータを保存します。 JavaScript オブジェクトを含むすべてのタイプのデータを直接保存できます。オブジェクト ウェアハウスでは、データは「キーと値のペア」の形式で保存されます。各データ レコードには対応する主キーがあり、重複することはできません。重複しないとエラーがスローされます。
**(2) 非同期。 ** IndexedDB は動作中にブラウザをロックせず、ユーザーは引き続き他の操作を実行できます。これは、同期的に動作する LocalStorage とは対照的です。非同期設計は、大量のデータの読み取りと書き込みによって Web ページのパフォーマンスが低下するのを防ぐことです。
**(3) トランザクションをサポートします。 ** IndexedDB はトランザクションをサポートしています。つまり、一連の操作ステップの 1 つのステップが失敗した場合、トランザクション全体がキャンセルされ、データベースはトランザクションが発生する前の状態にロールバックされます。一部だけを書き換える必要はありません。データ。
**(4) 相同性の制限。 ** IndexedDB には同一オリジン制限があり、各データベースはそれが作成されたドメイン名に対応します。 Web ページは、独自のドメイン名のデータベースにのみアクセスできますが、クロスドメイン データベースにはアクセスできません。
**(5) 大きな収納スペース。 ** IndexedDB のストレージ容量は LocalStorage よりもはるかに大きく、通常は 250MB 以上で、上限はありません。
**(6) バイナリ ストレージをサポートします。 ** IndexedDB は文字列だけでなく、バイナリ データ (ArrayBuffer オブジェクトや Blob オブジェクト) も格納できます。
基本概念
IndexedDB は、多くの概念を含む比較的複雑な API です。さまざまなエンティティをオブジェクト インターフェイスに抽象化します。この API を学習するということは、そのさまざまなオブジェクト インターフェイスを学習することを意味します。
- データベース: IDBDatabase オブジェクト
- オブジェクト ウェアハウス: IDBObjectStore オブジェクト
- インデックス: IDBIndex オブジェクト
- トランザクション: IDBTransaction オブジェクト
- 操作リクエスト: IDBRequest オブジェクト
- ポインタ: IDBCursor オブジェクト
- 主キーのコレクション: IDBKeyRange オブジェクト
以下にいくつかの重要な概念を示します。
(1)データベース
データベースは、一連の関連データのコンテナーです。各ドメイン名 (厳密には、プロトコル + ドメイン名 + ポート) で、任意の数の新しいデータベースを作成できます。
IndexedDB データベースにはバージョンの概念があります。同時に、データベースのバージョンは 1 つだけ存在できます。データベース構造を変更する場合 (テーブル、インデックス、または主キーの追加または削除)、データベースのバージョンをアップグレードすることによってのみ完了できます。
(2)オブジェクト倉庫
各データベースには複数のオブジェクト ストアが含まれています。これはリレーショナル データベース テーブルに似ています。
(3)データ記録
オブジェクト ウェアハウスはデータ レコードを保存します。各レコードはリレーショナル データベースの行に似ていますが、主キーとデータ本体の 2 つの部分しかありません。主キーはデフォルトのインデックスの作成に使用され、異なるものである必要があります。そうでない場合はエラーが報告されます。主キーはデータ レコード内の属性にすることも、増加する整数として指定することもできます。
{ id: 1、テキスト: 'foo' }
上記のオブジェクトでは、「id」属性を主キーとして使用できます。
データ本体は、オブジェクトに限定されず、任意のデータ型にすることができます。
(4)インデックス
データの取得を高速化するために、オブジェクト ウェアハウス内のさまざまな属性のインデックスを作成できます。
(5)取引
データレコードの読み取り、書き込み、削除はトランザクションを通じて完了する必要があります。トランザクション オブジェクトは、操作結果を監視するために、「error」、「abort」、「complete」の 3 つのイベントを提供します。
操作プロセス
IndexedDB データベースに対するさまざまな操作は、通常、次のプロセスに従って実行されます。このセクションでは、クイック スタート用の簡単なコード例のみを示します。各オブジェクトの詳細な API は後で紹介します。
オープンデータベース
IndexedDB を使用する最初のステップは、indexedDB.open() メソッドを使用してデータベースを開くことです。
var request = window.indexedDB.open(データベース名, バージョン);
このメソッドは 2 つのパラメータを受け入れます。最初のパラメータはデータベースの名前を表す文字列です。指定したデータベースが存在しない場合は、新しいデータベースが作成されます。 2 番目のパラメータは、データベースのバージョンを表す整数です。省略した場合、既存のデータベースを開くときのデフォルトは現在のバージョンであり、新しいデータベースを作成するときのデフォルトは「1」です。
indexedDB.open() メソッドは IDBRequest オブジェクトを返します。このオブジェクトは、「error」、「success」、および「upgradeneeded」という 3 つのイベントを通じてデータベースを開いた結果を処理します。
(1)エラーイベント
「error」イベントは、データベースを開けなかったことを示します。
request.onerror = 関数 (イベント) {
console.log('データベースオープンエラー');
};
(2)成功イベント
「success」イベントは、データベースが正常に開かれたことを示します。
vardb;
request.onsuccess = 関数 (イベント) {
db = リクエスト.結果;
console.log('データベースが正常に開きました');
};
このとき、データベースオブジェクトは、「request」オブジェクトの「result」属性を通じて取得される。
(3)アップグレードが必要なイベント
指定したバージョン番号がデータベースの実際のバージョン番号より大きい場合、データベース アップグレード イベント「upgradeneeded」が発生します。
vardb;
request.onupgradeneeded = 関数 (イベント) {
db = イベント.ターゲット.結果;
}
このとき、データベースインスタンスはイベントオブジェクトの「target.result」プロパティを通じて取得されます。
新しいデータベースを作成する
新しいデータベースの作成は、データベースを開く操作と同じです。指定したデータベースが存在しない場合は作成されます。違いは、その後の操作が主に「upgradeneeded」イベントの listen 関数で完了することです。この時点ではバージョンが最初から作成されるため、このイベントがトリガーされます。
通常、新しいデータベースを作成した後、最初に新しいオブジェクト ウェアハウスを作成します (つまり、新しいテーブルを作成します)。
request.onupgradeneeded = 関数(イベント) {
db = イベント.ターゲット.結果;
var objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
上記のコードでは、データベースが正常に作成された後、「person」という新しいテーブルが追加され、主キーは「id」です。
より良い記述方法は、最初にこのテーブルが存在するかどうかを確認し、存在しない場合は新しいテーブルを作成することです。
request.onupgradeneeded = 関数 (イベント) {
db = イベント.ターゲット.結果;
var オブジェクトストア;
if (!db.objectStoreNames.contains('person')) {
objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
}
主キー (キー) は、デフォルトでインデックスが付けられる属性です。たとえば、データ レコードが { id: 1, name: 'Zhang San' } の場合、id 属性を主キーとして使用できます。主キーは、次のレベルのオブジェクトの属性として指定することもできます。たとえば、{ foo: { bar: 'baz' } } の foo.bar を主キーとして指定することもできます。
データ レコード内に主キーとして適切な属性がない場合は、IndexedDB に主キーを自動的に生成させることができます。
var objectStore = db.createObjectStore(
'人'、
{ autoIncrement: true }
);
上記のコードでは、主キーは増加する整数として指定されています。
新しいオブジェクト ウェアハウスを作成したら、次のステップは新しいインデックスを作成することです。
request.onupgradeneeded = 関数(イベント) {
db = イベント.ターゲット.結果;
var objectStore = db.createObjectStore('person', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
}
上記のコードでは、IDBObject.createIndex() の 3 つのパラメーターは、インデックス名、インデックスが配置されている属性、および構成オブジェクト (属性に重複値が含まれているかどうかを示す) です。
新しいデータを追加する
新しいデータの追加とは、データ レコードをオブジェクト ウェアハウスに書き込むことを指します。これはトランザクションを通じて行う必要があります。
関数 add() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('人')
.add({ id: 1、名前: 'Zhang San'、年齢: 24、メール: 'zhangsan@example.com' });
request.onsuccess = 関数 (イベント) {
console.log('データは正常に書き込まれました');
};
request.onerror = 関数 (イベント) {
console.log('データの書き込みに失敗しました');
}
}
追加（）;
上記のコードでは、データを書き込むには新しいトランザクションを作成する必要があります。新しいテーブルを作成する場合は、テーブル名と操作モード (「読み取り専用」または「読み取り/書き込み」) を指定する必要があります。新しいトランザクションを作成した後、IDBTransaction.objectStore(name) メソッドを通じて IDBObjectStore オブジェクトを取得し、テーブル オブジェクトの add() メソッドを通じてテーブルにレコードを書き込みます。
書き込み操作は非同期操作です。接続オブジェクトの「success」イベントと「error」イベントをリッスンすることで、書き込みが成功したかどうかを知ることができます。
データの読み取り
データの読み取りもトランザクションを通じて行われます。
関数 read() {
var トランザクション = db.transaction(['人']);
var objectStore =transaction.objectStore('person');
var request = objectStore.get(1);
request.onerror = 関数(イベント) {
console.log('トランザクションが失敗しました');
};
request.onsuccess = 関数(イベント) {
if (リクエスト.結果) {
console.log('名前: ' + request.result.name);
console.log('年齢: ' + request.result.age);
console.log('電子メール: ' + request.result.email);
} それ以外 {
console.log('データレコードが取得されませんでした');
}
};
}
読む（）;
上記のコードでは、「objectStore.get()」メソッドを使用してデータを読み取り、パラメータは主キーの値です。
データのトラバース
データ テーブル内のすべてのレコードを走査するには、ポインター オブジェクト IDBCursor を使用します。
関数 readAll() {
var objectStore = db.transaction('person').objectStore('person');
objectStore.openCursor().onsuccess = 関数 (イベント) {
var カーソル = イベント.ターゲット.結果;
if (カーソル) {
console.log('Id: ' + カーソル.キー);
console.log('名前: ' + カーソル.値.名前);
console.log('年齢: ' + カーソル.値.年齢);
console.log('電子メール: ' +cursor.value.email);
カーソル.Continue();
} それ以外 {
console.log('これ以上データはありません!');
}
};
}
readAll();
上記のコードでは、新しいポインター オブジェクトを作成する openCursor() メソッドは非同期操作であるため、success イベントをリッスンする必要があります。
データを更新する
データを更新するには、「IDBObject.put()」メソッドを使用します。
関数 update() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('人')
.put({ id: 1, 名前: '李思', 年齢: 35, 電子メール: 'lisi@example.com' });
request.onsuccess = 関数 (イベント) {
console.log('データは正常に更新されました');
};
request.onerror = 関数 (イベント) {
console.log('データ更新に失敗しました');
}
}
アップデート（）;
上記のコードでは、put() メソッドが主キー 1 を持つレコードを自動的に更新します。
データを削除する
IDBObjectStore.delete() メソッドはレコードを削除するために使用されます。
関数削除() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('人')
.delete(1);
request.onsuccess = 関数 (イベント) {
console.log('データは正常に削除されました');
};
}
取り除く（）;
インデックスの使用
インデックスの重要性は、任意のフィールドを検索できること、つまり任意のフィールドからデータ レコードを取得できることです。インデックスが作成されていない場合、デフォルトでは主キーのみが検索できます (つまり、値は主キーから取得されます)。
新しいテーブルを作成するときに、「name」フィールドにインデックスが作成されることが想定されています。
objectStore.createIndex('name', 'name', { unique: false });
これで、「name」から対応するデータレコードを見つけることができます。
vartransaction = db.transaction(['person'], 'readonly');
varstore =transaction.objectStore('person');
var インデックス = ストア.インデックス('名前');
var request =index.get('李思');
request.onsuccess = 関数 (e) {
var result = e.target.result;
if (結果) {
// ...
} それ以外 {
// ...
}
}
インデックス付きDBオブジェクト
ブラウザは、開発者向けの操作インターフェイスとして「indexedDB」オブジェクトをネイティブに提供します。
IndexedDB.open()
indexedDB.open() メソッドはデータベースを開くために使用されます。これは非同期操作ですが、IDBOpenDBRequest オブジェクトがすぐに返されます。
var openRequest = window.indexedDB.open('test', 1);
上記のコードは、「test」という名前とバージョン「1」のデータベースが開かれていることを示しています。データベースが存在しない場合は作成されます。
open() メソッドの最初のパラメータは文字列形式のデータベース名であり、省略できません。2 番目のパラメータはデータベースのバージョンであり、0 より大きい正の整数です (0 はレポートします)。エラー)。パラメータが現在のバージョンより大きい場合、データベースのアップグレードがトリガーされます。 2 番目のパラメータは省略できます。データベースがすでに存在する場合は、現在のバージョンのデータベースが開きます。データベースが存在しない場合は、このバージョンのデータベースが作成されます。デフォルトのバージョンは「1」です。
データベースを開くことは非同期操作であり、クライアントはさまざまなイベントを通じて通知されます。以下に、トリガーされる可能性のある 4 種類のイベントを示します。
- 成功: 正常に開きました。
- エラー: 開けませんでした。
- アップグレードが必要: データベースが初めて開かれるか、データベースのバージョンが変更されます。
- ブロックされました: 最後のデータベース接続は閉じられていません。
データベースを初めて開くと、最初に「upgradeneeded」イベントがトリガーされ、次に「success」イベントがトリガーされます。
さまざまなニーズに応じて、上記 4 つのイベント リスニング機能が提供されます。
var openRequest = IndexedDB.open('test', 1);
vardb;
openRequest.onupgradeneeded = 関数 (e) {
console.log('アップグレード中...');
}
openRequest.onsuccess = 関数 (e) {
console.log('成功!');
db = openRequest.result;
}
openRequest.onerror = 関数 (e) {
console.log('エラー');
コンソール.ログ(e);
}
上記のコードに関して注意すべき点が 2 つあります。まず、open() メソッドはオブジェクト (IDBOpenDBRequest) を返し、このオブジェクトに対してリスニング関数が定義されます。次に、「success」イベントが発生した後、開かれた「IndexedDB」データベース オブジェクトを「openRequest.result」プロパティから取得できます。
IndexedDB.deleteDatabase()
indexedDB.deleteDatabase() メソッドはデータベースを削除するために使用され、パラメータはデータベースの名前です。すぐに IDBOpenDBRequest オブジェクトを返し、データベースの非同期削除を実行します。削除操作の結果はイベントを通じて通知されます。IDBOpenDBRequest オブジェクトは次のイベントをリッスンできます。
success: 削除が成功しました。error: エラーレポートを削除します
var DBDeleteRequest = window.indexedDB.deleteDatabase('demo');
DBDeleteRequest.onerror = 関数 (イベント) {
console.log('エラー');
};
DBDeleteRequest.onsuccess = 関数 (イベント) {
console.log('成功');
};
deleteDatabase() メソッドを呼び出した後、現在のデータベースへの他の開いている接続は versionchange イベントを受け取ります。
存在しないデータベースを削除してもエラーは発生しないことに注意してください。
インデックスDB.cmp()
indexedDB.cmp() メソッドは 2 つの値を比較して、indexedDB の同じ主キーがあるかどうかを確認します。比較の結果を示す整数を返します。「0」は同じを意味し、「1」は最初の主キーが 2 番目の主キーより大きいことを意味し、「-1」は最初の主キーが 2 番目の主キーより小さいことを意味します。鍵。
window.indexedDB.cmp(1, 2) // -1
このメソッドは、任意の JavaScript 値の比較には使用できないことに注意してください。引数がブール値またはオブジェクトの場合、エラーが報告されます。
window.indexedDB.cmp(1, true) // エラーレポート
window.indexedDB.cmp({}, {}) // エラーレポート
IDBRequest オブジェクト
IDBRequest オブジェクトは、開いているデータベース接続を表します。indexedDB.open() メソッドと indexedDB.deleteDatabase() メソッドは、このオブジェクトを返します。データベース操作はこのオブジェクトを通じて完了します。
このオブジェクトに対するすべての操作は、「readyState」属性を使用して完了したかどうかを判断する必要があります。「pending」の場合は、操作が進行中であることを意味します。操作は完了する場合もあれば、失敗する場合もあります。
操作が完了すると、「success」イベントまたは「error」イベントがトリガーされます。このとき、操作結果は「result」属性と「error」属性を通じて取得できます。これら 2 つのプロパティを「pending」ステージで読み取ると、エラーが報告されます。
IDBRequest オブジェクトには次のプロパティがあります。
IDBRequest.readyState:pendingに等しい場合は操作が進行中であることを意味し、doneに等しい場合は操作が完了していることを意味します。IDBRequest.result: リクエストの結果を返します。リクエストが失敗し、結果が利用できない場合、この属性の読み取り時にエラーが報告されます。IDBRequest.error: リクエストが失敗すると、エラー オブジェクトが返されます。IDBRequest.source: リクエストのソース (インデックス オブジェクトや ObjectStore など) を返します。IDBRequest.transaction: 現在のリクエストの進行中のトランザクションを返します。トランザクションが含まれていない場合は、nullが返されます。IDBRequest.onsuccess:successイベントのリスニング関数を指定します。IDBRequest.onerror:errorイベントのリスニング関数を指定します。
IDBOpenDBRequest オブジェクトは IDBRequest オブジェクトを継承し、2 つの追加のイベント リスニング プロパティを提供します。
IDBOpenDBRequest.onblocked:blockedイベントのリスニング関数を指定します (upgradeneededイベントがトリガーされたとき、データベースはまだ使用されています)。IDBOpenDBRequest.onupgradeneeded:upgradeneededイベントのリスニング関数。
IDBデータベース オブジェクト
データが正常に開くと、接続されたデータベースを表す IDBOpenDBRequest オブジェクトの result 属性から IDBDatabase オブジェクトを取得できます。データベースに対する後続の操作はすべて、このオブジェクトを通じて完了します。
vardb;
var DBOpenRequest = window.indexedDB.open('demo', 1);
DBOpenRequest.onerror = 関数 (イベント) {
console.log('エラー');
};
DBOpenRequest.onsuccess = 関数(イベント) {
db = DBOpenRequest.結果;
// ...
};
プロパティ
IDBDatabase オブジェクトには次のプロパティがあります。
IDBDatabase.name: 文字列、データベース名。IDBDatabase.version: 整数、データベースのバージョン。データベースが最初に作成されたとき、このプロパティは空の文字列です。IDBDatabase.objectStoreNames: 現在のデータのすべてのオブジェクト ストアの名前を含む DOMStringList オブジェクト (文字列のコレクション)。IDBDatabase.onabort: アボートイベント(トランザクションアボート)のリスニング関数を指定します。IDBDatabase.onclose: クローズ イベント (データベースが予期せず閉じられた場合) のリスニング関数を指定します。IDBDatabase.onerror: エラー イベント (データベースへのアクセスの失敗) のリスニング関数を指定します。IDBDatabase.onversionchange: データベースのバージョンが変更されるとトリガーされます (upgradeneededイベントが発生するか、またはindexedDB.deleteDatabase()が呼び出されます)。
以下は objectStoreNames プロパティの例です。このプロパティは、現在のデータベース内のすべてのオブジェクト ウェアハウスの名前 (つまり、テーブル名) を含む DOMStringList オブジェクトを返します。DOMStringList オブジェクトの contains メソッドを使用して、データベースにオブジェクト ウェアハウスが含まれているかどうかを確認できます。
if (!db.objectStoreNames.contains('firstOS')) {
db.createObjectStore('firstOS');
}
上記のコードは、まずオブジェクト ウェアハウスが存在するかどうかを確認し、存在しない場合はオブジェクト ウェアハウスを作成します。
方法
IDBDatabase オブジェクトには次のメソッドがあります。
IDBDatabase.close(): データベース接続を閉じます。実際には、すべてのトランザクションが完了するまで待ってから閉じます。IDBDatabase.createObjectStore(): 従来のリレーショナル データベースのテーブルと同様に、データを保存するオブジェクト ウェアハウスを作成し、IDBObjectStore オブジェクトを返します。このメソッドは、versionchangeイベント リスニング関数内でのみ呼び出すことができます。IDBDatabase.deleteObjectStore(): 指定されたオブジェクト ストアを削除します。このメソッドは、versionchangeイベント リスニング関数内でのみ呼び出すことができます。IDBDatabase.transaction(): IDBTransaction トランザクション オブジェクトを返します。
以下は createObjectStore() メソッドの例です。
var request = window.indexedDB.open('demo', 2);
request.onupgradeneeded = 関数 (イベント) {
var db = イベント.ターゲット.結果;
db.onerror = 関数(イベント) {
console.log('エラー');
};
var objectStore = db.createObjectStore('items');
// ...
};
上記のコードは、「items」という名前のオブジェクト ウェアハウスを作成します。オブジェクト ウェアハウスがすでに存在する場合、エラーがスローされます。エラーを回避するには、以下の objectStoreNames 属性を使用して、どのオブジェクト ストアが存在するかを確認する必要があります。
createObjectStore() メソッドは、オブジェクト ストアのプロパティを設定するために使用される 2 番目のオブジェクト パラメーターを受け入れることもできます。
db.createObjectStore('テスト', { keyPath: '電子メール' });
db.createObjectStore('test2', { autoIncrement: true });
上記のコードでは、keyPath 属性が主キーを表します (主キーの値は繰り返すことができないため、上記の例を保存する前に、データの email 属性値が次のとおりであることを確認する必要があります) autoIncrement 属性は、自動的に増加する整数を主キーとして使用するかどうかを示します (最初のデータ レコードは 1、2 番目のデータ レコードは 2 など)。デフォルトは「false」です。一般に、keyPath属性とautoIncrement属性のいずれか 1 つだけで十分です。両方を同時に使用する場合、主キーは増加する整数であり、オブジェクトにはkeyPathで指定された属性が欠けていてはなりません。。
以下は deleteObjectStore() メソッドの例です。
var dbName = 'サンプルDB';
var dbVersion = 2;
var request = IndexedDB.open(dbName, dbVersion);
request.onupgradeneeded = function(e) {
var db = リクエスト.結果;
if (e.oldVersion < 1) {
db.createObjectStore('store1');
}
if (e.oldVersion < 2) {
db.deleteObjectStore('store1');
db.createObjectStore('store2');
}
// ...
};
以下は、データベース トランザクションを作成し、IDBTransaction オブジェクトを返すために使用される transaction() メソッドの例です。データベースにデータを追加する前に、データベース トランザクションを作成する必要があります。
var t = db.transaction(['items'], 'readwrite');
transaction() メソッドは 2 つのパラメータを受け入れます。最初のパラメータは関連するオブジェクト ウェアハウスを含む配列で、通常は 1 つだけあり、2 番目のパラメータは操作の種類を示す文字列です。現在、操作には readonly (読み取り専用) と readwrite (読み取り/書き込み) の 2 種類のみがあります。データを追加するには「readwrite」を使用し、データを読み取るには「readonly」を使用します。 2 番目のパラメータはオプションであり、省略するとデフォルトの「読み取り専用」モードになります。
IDBObjectStore オブジェクト
IDBObjectStore オブジェクトはオブジェクト ストアに対応します。 IDBDatabase.createObjectStore() メソッドは IDBObjectStore オブジェクトを返します。
IDBDatabase オブジェクトの transaction() メソッドはトランザクション オブジェクトを返し、オブジェクトの objectStore() メソッドは IDBObjectStore オブジェクトを返すため、次のようなチェーン書き込みメソッドが使用できます。
db.transaction(['テスト'], '読み取り専用')
.objectStore('テスト')
.get(X)
.onsuccess = 関数 (e) {}
プロパティ
IDBObjectStore オブジェクトには次のプロパティがあります。
IDBObjectStore.indexNames: 現在のオブジェクト ストアのすべてのインデックスを含む、配列のようなオブジェクト (DOMStringList) を返します。IDBObjectStore.keyPath: 現在のオブジェクト ストアの主キーを返します。IDBObjectStore.name: 現在のオブジェクト ストアの名前を返します。IDBObjectStore.transaction: 現在のオブジェクト ストアが属するトランザクション オブジェクトを返します。IDBObjectStore.autoIncrement: 主キーが自動的にインクリメントされるかどうかを示すブール値。
方法
IDBObjectStore オブジェクトには次のメソッドがあります。
(1)IDBObjectStore.add()
IDBObjectStore.add() はオブジェクト ストアにデータを追加するために使用され、IDBRequest オブジェクトを返します。このメソッドはデータを追加するためにのみ使用されます。主キーが同じ場合はエラーが報告されるため、データを更新するには put() メソッドを使用する必要があります。
objectStore.add(値, キー)
このメソッドは 2 つのパラメータを受け取ります。最初のパラメータはキー値で、2 番目のパラメータは省略可能です。このパラメータは省略可能です。
トランザクションを作成した後、オブジェクト ウェアハウスを取得し、add() メソッドを使用してそれにデータを追加できます。
vardb;
var DBOpenRequest = window.indexedDB.open('demo', 1);
DBOpenRequest.onsuccess = 関数 (イベント) {
db = DBOpenRequest.結果;
vartransaction = db.transaction(['items'], 'readwrite');
transaction.oncomplete = 関数 (イベント) {
console.log('トランザクション成功');
};
transaction.onerror = 関数 (イベント) {
console.log('トランザクション エラー: ' + トランザクション.エラー);
};
var objectStore =transaction.objectStore('items');
var objectStoreRequest = objectStore.add({ foo: 1 });
objectStoreRequest.onsuccess = 関数 (イベント) {
console.log('データ追加成功');
};
};
(2)IDBObjectStore.put()
IDBObjectStore.put() メソッドは、特定の主キーに対応するデータ レコードを更新するために使用されます。対応するキー値が存在しない場合は、新しいレコードが挿入されます。このメソッドは IDBRequest オブジェクトを返します。
objectStore.put(アイテム, キー)
このメソッドは 2 つのパラメーターを受け入れます。最初のパラメーターは新しいデータで、2 番目のパラメーターは主キーです。このパラメーターはオプションであり、自動インクリメントの場合にのみ必要です。これは、主キーがデータ値に含まれないためです。
(3)IDBObjectStore.clear()
IDBObjectStore.clear() は、現在のオブジェクト ストア内のすべてのレコードを削除します。このメソッドは IDBRequest オブジェクトを返します。
objectStore.clear()
このメソッドにはパラメーターは必要ありません。
(4)IDBObjectStore.delete()
IDBObjectStore.delete() メソッドは、指定された主キーを持つレコードを削除するために使用されます。このメソッドは IDBRequest オブジェクトを返します。
objectStore.delete(キー)
このメソッドのパラメータは主キーの値です。
(5)IDBObjectStore.count()
IDBObjectStore.count() メソッドはレコード数をカウントするために使用されます。このメソッドは IDBRequest オブジェクトを返します。
IDBObjectStore.count(キー)
パラメータを指定しないと、このメソッドは現在のオブジェクト ウェアハウス内のすべてのレコードの数を返します。主キーまたは IDBKeyRange オブジェクトがパラメータとして使用される場合、対応する数のレコードが返されます。
(6)IDBObjectStore.getKey()
主キーの取得には「IDBObjectStore.getKey()」を使用します。このメソッドは IDBRequest オブジェクトを返します。
objectStore.getKey(キー)
このメソッドの引数には、主キー値または IDBKeyRange オブジェクトを指定できます。
(7)IDBObjectStore.get()
IDBObjectStore.get() は、主キーに対応するデータ レコードを取得するために使用されます。このメソッドは IDBRequest オブジェクトを返します。
objectStore.get(キー)
(8)IDBObjectStore.getAll()
DBObjectStore.getAll() は、オブジェクト ストアのレコードを取得するために使用されます。このメソッドは IDBRequest オブジェクトを返します。
// すべてのレコードを取得します
objectStore.getAll()
// 指定された主キーまたは IDBKeyRange に一致するすべてのレコードを取得します
objectStore.getAll(クエリ)
//取得するレコード数を指定
objectStore.getAll(クエリ, カウント)
(9)IDBObjectStore.getAllKeys()
IDBObjectStore.getAllKeys() は、条件を満たすすべての主キーを取得するために使用されます。このメソッドは IDBRequest オブジェクトを返します。
// すべてのレコードの主キーを取得します
objectStore.getAllKeys()
// 一致する主キーをすべて取得します
objectStore.getAllKeys(クエリ)
//取得する主キーの数を指定
objectStore.getAllKeys(クエリ, カウント)
(10)IDBObjectStore.index()
IDBObjectStore.index() メソッドは、指定された名前のインデックス オブジェクト IDBIndex を返します。
objectStore.index(名前)
インデックスを取得すると、インデックスが配置されている属性のデータを読み取ることができます。
var t = db.transaction(['people'], 'readonly');
var ストア = t.objectStore('人');
var インデックス = ストア.インデックス('名前');
var request = インデックス.get('foo');
上記のコードはオブジェクト ウェアハウスを開いた後、最初に index() メソッドを使用して name 属性のインデックスを指定し、次に get() メソッドを使用して特定の name に対応するデータを読み取ります。 属性 (foo)。 「name」属性が一意の値に対応しない場合、「get()」メソッドは複数のデータ オブジェクトを取得する可能性があります。さらに、get()は非同期メソッドです。読み取りに成功した後は、データはsuccess` イベントの listen 関数内でのみ処理できます。
(11)IDBObjectStore.createIndex()
IDBObjectStore.createIndex() メソッドは、現在のデータベースに新しいインデックスを作成するために使用されます。このメソッドは、VersionChange リスニング関数内でのみ呼び出すことができます。
objectStore.createIndex(indexName, keyPath, objectParameters)
このメソッドは 3 つのパラメータを受け入れることができます。
- IndexName: インデックス名
- keyPath: 主キー
- objectParameters: 設定オブジェクト (オプション)
3 番目のパラメーターでは、次のプロパティを構成できます。
- unique: 「true」に設定すると、重複した値は許可されません
- multiEntry: 「true」に設定すると、複数の値を持つ主キー配列の場合、各値がインデックスに新しいエントリを作成します。それ以外の場合、主キー配列は 1 つのエントリに対応します。
オブジェクト ウェアハウス内のデータ レコードはすべて、次の「person」タイプであると仮定します。
var 人 = {
名前：名前、
電子メール: 電子メール、
作成日: new Date()
};
このオブジェクトのプロパティを指定してインデックスを作成できます。
var store = db.createObjectStore('people', { autoIncrement: true });
store.createIndex('name', 'name', { unique: false });
store.createIndex('email', 'email', { unique: true });
上記のコードは、「name」属性が一意の値ではなく、「email」属性が一意の値であることをインデックス オブジェクトに伝えます。
(12)IDBObjectStore.deleteIndex()
IDBObjectStore.deleteIndex() メソッドは、指定されたインデックスを削除するために使用されます。このメソッドは、VersionChange リスニング関数内でのみ呼び出すことができます。
objectStore.deleteIndex(インデックス名)
(13)IDBObjectStore.openCursor()
IDBObjectStore.openCursor() はポインター オブジェクトを取得するために使用されます。
IDBObjectStore.openCursor()
ポインター オブジェクトを使用してデータを走査できます。このオブジェクトも非同期であり、独自の success および error イベントを持ち、リスニング関数を指定できます。
var t = db.transaction(['test'], 'readonly');
var ストア = t.objectStore('test');
var カーソル = store.openCursor();
カーソル.onsuccess = 関数 (イベント) {
var res = イベント.ターゲット.結果;
if (res) {
console.log('キー', res.key);
console.dir('データ', res.value);
res.Continue();
}
}
リスニング関数はイベント オブジェクトをパラメーターとして受け取り、オブジェクトの target.result プロパティは現在のデータ レコードを指します。このレコードの「キー」と「値」は、それぞれ主キーとキー値 (つまり、実際に保存されているデータ) を返します。 Continue() メソッドは、カーソルを次のデータ オブジェクトに移動します。現在のデータ オブジェクトがすでに最後のデータである場合、カーソルは null を指します。
「openCursor()」メソッドの最初のパラメータは主キー値、つまりIDBKeyRangeオブジェクトです。このパラメータを指定した場合は、指定した主キーを含むレコードのみが処理され、省略した場合はすべてのレコードが処理されます。このメソッドは、トラバース方向を示す 2 番目のパラメータも受け入れることができます。デフォルト値は next で、その他の可能な値は prev、nextunique、および prevunique です。最後の 2 つの値は、重複する値が見つかった場合、自動的にスキップされることを示します。
(14)IDBObjectStore.openKeyCursor()
IDBObjectStore.openKeyCursor() は主キー ポインター オブジェクトを取得するために使用されます。
IDBObjectStore.openKeyCursor()
IDBTransaction オブジェクト
IDBTransaction オブジェクトはデータベース トランザクションを非同期的に操作するために使用され、すべての読み取りおよび書き込み操作はこのオブジェクトを通じて実行する必要があります。
IDBDatabase.transaction() メソッドは IDBTransaction オブジェクトを返します。
vardb;
var DBOpenRequest = window.indexedDB.open('demo', 1);
DBOpenRequest.onsuccess = 関数(イベント) {
db = DBOpenRequest.結果;
vartransaction = db.transaction(['demo'], 'readwrite');
transaction.oncomplete = 関数 (イベント) {
console.log('トランザクション成功');
};
transaction.onerror = 関数 (イベント) {
console.log('トランザクション エラー: ' + トランザクション.エラー);
};
var objectStore =transaction.objectStore('demo');
var objectStoreRequest = objectStore.add({ foo: 1 });
objectStoreRequest.onsuccess = 関数 (イベント) {
console.log('データ追加成功');
};
};
トランザクションは、要求された順序ではなく、作成された順序で実行されます。
var trans1 = db.transaction('foo', 'readwrite');
var trans2 = db.transaction('foo', 'readwrite');
var objectStore2 = trans2.objectStore('foo')
var objectStore1 = trans1.objectStore('foo')
objectStore2.put('2', 'key');
objectStore1.put('1', 'key');
上記のコードでは、「key」に対応するキー値は最終的に「1」ではなく「2」になります。トランザクション trans1 は trans2 より前に作成されるため、最初に実行されます。
トランザクションが失敗する可能性があることに注意してください。トランザクションの「complete」イベントを監視することによってのみ、トランザクション操作の成功が保証されます。
IDBTransaction オブジェクトには次のプロパティがあります。
IDBTransaction.db: 現在のトランザクションが存在するデータベース オブジェクト IDBDatabase を返します。IDBTransaction.error: 現在のトランザクションのエラーを返します。トランザクションが終了しなかった場合、トランザクションが正常に終了した場合、または手動で終了した場合、このメソッドは「null」を返します。IDBTransaction.mode: 現在のトランザクションのモードを返します。デフォルトはreadonly(読み取り専用)、その他の値はreadwriteです。IDBTransaction.objectStoreNames: 配列のようなオブジェクト DOMStringList を返します。そのメンバーは、現在のトランザクションに関係するオブジェクト ストアの名前です。IDBTransaction.onabort:abortイベント(トランザクション中断)のリスニング関数を指定します。IDBTransaction.oncomplete:completeイベント(トランザクション成功)のリスニング関数を指定します。IDBTransaction.onerror:errorイベント (トランザクション失敗) のリスニング関数を指定します。
IDBTransaction オブジェクトには次のメソッドがあります。
IDBTransaction.abort(): 現在のトランザクションを終了し、行われたすべての変更をロールバックします。IDBTransaction.objectStore(name): 指定された名前のオブジェクト ストア IDBObjectStore を返します。
IDBIndex オブジェクト
IDBIndex オブジェクトはデータベースのインデックスを表し、データベース内のレコードはこのオブジェクトを通じて取得できます。データ レコードの主キーにはデフォルトでインデックスが付けられます。IDBIndex オブジェクトは主に、主キー以外の他のキーを通じてオブジェクトを取得するためのインデックスを作成するために使用されます。
IDBIndex は永続的なキーと値のストアです。インデックスは、オブジェクト ライブラリ内のレコードを参照してデータ レコードが挿入、更新、または削除されるたびに自動的に更新されます。
IDBObjectStore.index() メソッドは、IDBIndex オブジェクトを取得できます。
vartransaction = db.transaction(['contactsList'], 'readonly');
var objectStore =transaction.objectStore('contactsList');
var myIndex = objectStore.index('lName');
myIndex.openCursor().onsuccess = 関数 (イベント) {
var カーソル = イベント.ターゲット.結果;
if (カーソル) {
var tableRow = document.createElement('tr');
tableRow.innerHTML = '<td>' +cursor.value.id + '</td>'
+ '<td>' + カーソル.値.lName + '</td>'
+ '<td>' + カーソル.値.fName + '</td>'
+ '<td>' +cursor.value.jTitle + '</td>'
+ '<td>' +cursor.value.company + '</td>'
+ '<td>' +cursor.value.eMail + '</td>'
+ '<td>' +cursor.value.phone + '</td>'
+ '<td>' +cursor.value.age + '</td>';
tableEntry.appendChild(tableRow);
カーソル.Continue();
} それ以外 {
console.log('すべてのエントリが表示されました。');
}
};
IDBIndex オブジェクトには次のプロパティがあります。
IDBIndex.name: 文字列、インデックスの名前。IDBIndex.objectStore: インデックスが配置されているオブジェクト ストア。IDBIndex.keyPath: インデックスの主キー。IDBIndex.multiEntry: ブール値。keyPathが配列の場合、trueに設定すると、配列の作成時に各配列メンバーに 1 つのエントリが含まれます。それ以外の場合、各配列には 1 つのエントリだけが含まれます。IDBIndex.unique: インデックスの作成時に同じ主キーが許可されるかどうかを示すブール値。
IDBIndex オブジェクトには次のメソッドがあり、これらはすべて非同期であり、すぐに IDBRequest オブジェクトを返します。
IDBIndex.count(): レコード数を取得するために使用されます。主キーまたは IDBKeyRange オブジェクトをパラメータとして受け入れることができます。この場合、主キーに一致するレコードの数のみが返され、それ以外の場合はすべてのレコードの数が返されます。IDBIndex.get(key): 指定された主キーに一致するデータ レコードを取得するために使用されます。IDBIndex.getKey(key): 指定された主キーを取得するために使用されます。IDBIndex.getAll(): すべてのデータ レコードを取得するために使用されます。 2 つのパラメータを受け入れることができますが、どちらもオプションです。最初のパラメータは主キーを指定するために使用され、2 番目のパラメータは返されるレコードの数を指定するために使用されます。これら 2 つのパラメータを省略すると、すべてのレコードが返されます。ブラウザは取得が成功したときにすべてのオブジェクトを生成する必要があるため、パフォーマンスに影響します。データ セットが比較的大きい場合は、IDBCursor オブジェクトを使用することをお勧めします。IDBIndex.getAllKeys(): このメソッドはIDBIndex.getAll()メソッドに似ていますが、すべての主キーが取得される点が異なります。IDBIndex.openCursor(): IDBCursor オブジェクトを取得するために使用され、インデックス内のすべてのエントリを走査するために使用されます。IDBIndex.openKeyCursor(): このメソッドは、すべてのエントリの主キーを走査する点を除いて、IDBIndex.openCursor()メソッドと似ています。
IDBCursor オブジェクト
IDBCursor オブジェクトはポインター オブジェクトを表し、データ ウェアハウス (IDBObjectStore) またはインデックス (IDBIndex) 内のレコードを走査するために使用されます。
IDBCursor オブジェクトは通常、「IDBObjectStore.openCursor()」メソッドを通じて取得されます。
vartransaction = db.transaction(['rushAlbumList'], 'readonly');
var objectStore =transaction.objectStore('rushAlbumList');
objectStore.openCursor(null, 'next').onsuccess = function(event) {
var カーソル = イベント.ターゲット.結果;
if (カーソル) {
var listItem = document.createElement('li');
listItem.innerHTML = カーソル.値.アルバムタイトル + ', ' + カーソル.値.年;
list.appendChild(listItem);
コンソール.ログ(カーソル.ソース);
カーソル.Continue();
} それ以外 {
console.log('すべてのエントリが表示されました。');
}
};
IDBCursor オブジェクトのプロパティ。
IDBCursor.source: 走査されているオブジェクト ウェアハウスまたはインデックスを返します。IDBCursor.direction: ポインタの移動方向を示す文字列。可能な値は 4 つあります: next (先頭から逆方向にトラバース)、nextunique (先頭から逆方向にトラバース、繰り返される値は 1 回のみトラバース)、prev (末尾から前方向にトラバース)、prevunique (末尾から前方向にトラバース) 、重複する値は 1 回だけ走査されます)。このプロパティは、IDBObjectStore.openCursor()メソッドの 2 番目のパラメーターを通じて指定されます。一度指定すると変更できません。IDBCursor.key: 現在のレコードの主キーを返します。IDBCursor.value: 現在のレコードのデータ値を返します。IDBCursor.primaryKey: 現在のレコードの主キーを返します。データ ウェアハウス (objectStore) の場合、このプロパティは IDBCursor.key に相当します。インデックスの場合、IDBCursor.key はインデックスの位置の値を返し、このプロパティはデータ レコードの主キーを返します。
IDBCursor オブジェクトには次のメソッドがあります。
IDBCursor.advance(n): ポインタを n 位置前に移動します。IDBCursor. continue(): ポインタを 1 つ前に移動します。主キーをパラメータとして受け入れることができ、その場合は主キーにジャンプします。IDBCursor. continuePrimaryKey(): このメソッドには 2 つのパラメータが必要です。1 つ目はkey、2 つ目はprimaryKeyです。これら 2 つのパラメータに一致する位置にポインタを移動します。IDBCursor.delete(): 現在の場所にあるレコードを削除し、IDBRequest オブジェクトを返すために使用されます。このメソッドはポインターの位置を変更しません。IDBCursor.update(): 現在の場所のレコードを更新し、IDBRequest オブジェクトを返すために使用されます。そのパラメータは、データベースに書き込まれる新しい値です。
IDBKeyRange オブジェクト
IDBKeyRange オブジェクトは、データ ウェアハウス (オブジェクト ストア) 内の主キーのセットを表します。この主キーのセットに基づいて、データ ウェアハウスまたはインデックス内のレコードのセットを取得できます。
IDBKeyRange には単一の値のみを含めることも、上限と下限を指定することもできます。主キーの範囲を指定するための 4 つの静的メソッドがあります。
IDBKeyRange. lowerBound(): 下限値を指定します。IDBKeyRange.upperBound(): 上限を指定します。IDBKeyRange.bound(): 上限と下限を同時に指定します。IDBKeyRange.only(): 値を 1 つだけ含めることを指定します。
以下にいくつかのコード例を示します。
// すべてのキー ≤ x
var r1 = IDBKeyRange.upperBound(x);
// すべてのキー < x
var r2 = IDBKeyRange.upperBound(x, true);
// すべてのキー ≥ y
var r3 = IDBKeyRange. lowerBound(y);
// すべてのキー > y
var r4 = IDBKeyRange. lowerBound(y, true);
// すべてのキー ≥ x && ≤ y
var r5 = IDBKeyRange.bound(x, y);
// すべてのキー > x &&< y
var r6 = IDBKeyRange.bound(x, y, true, true);
// すべてのキー > x && ≤ y
var r7 = IDBKeyRange.bound(x, y, true, false);
// すべてのキー ≥ x &&< y
var r8 = IDBKeyRange.bound(x, y, false, true);
// キー = z
var r9 = IDBKeyRange.only(z);
IDBKeyRange. lowerBound()、IDBKeyRange.upperBound()、および IDBKeyRange.bound() の 3 つのメソッドには、デフォルトでエンドポイント値が含まれており、このプロパティを変更するためにブール値を渡すことができます。
同様に、IDBKeyRange オブジェクトには 4 つの読み取り専用プロパティがあります。
IDBKeyRange. lower: 下限を返します。IDBKeyRange. lowerOpen: 下限が開いた間隔であるかどうか (つまり、下限が範囲から除外されているかどうか) を示すブール値。IDBKeyRange.upper: 上限を返しますIDBKeyRange.upperOpen: 上限が開いた範囲であるかどうか (つまり、上限が範囲から除外されているかどうか) を示すブール値
IDBKeyRangeインスタンスオブジェクトを生成したら、IDBObjectStoreまたはIDBIndexオブジェクトのopenCursor()メソッドにパラメータとして入力することで、設定した範囲内のデータを読み込むことができます。
var t = db.transaction(['people'], 'readonly');
var ストア = t.objectStore('人');
var インデックス = ストア.インデックス('名前');
var range = IDBKeyRange.bound('B', 'D');
Index.openCursor(range).onsuccess = 関数 (e) {
var カーソル = e.target.result;
if (カーソル) {
console.log(cursor.key + ':');
for (cursor.value の var フィールド) {
console.log(cursor.value[フィールド]);
}
カーソル.Continue();
}
}
IDBKeyRange にはインスタンス メソッド「includes(key)」があり、特定の主キーが現在の主キー グループに含まれているかどうかを示すブール値を返します。
var keyRangeValue = IDBKeyRange.bound('A', 'K', false, false);
keyRangeValue.includes('F') // true
keyRangeValue.includes('W') // false
参考リンク
- Raymond Camden、IndexedDB の操作 – パート 1
- Raymond Camden、IndexedDB の操作 – パート 2
- Raymond Camden、IndexedDB の使用 - パート 3
- Tiffany Brown、IndexedDB の概要
- David Fahlander、IndexedDB の境界を突破する
- TutorialsPoint、HTML5 - IndexedDB
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0