IndexedDB を操作する

このガイドでは、Terraform ワークフローの IndexedDB API ここでは、Jake Archibald の IndexedDB の確約 このライブラリは IndexedDB API によく似ていますが、Promise を使用します。 await を使用すると構文をより簡潔にできます。これにより API が簡素化され その構造を維持します。

IndexedDB とは

IndexedDB は大規模な NoSQL ストレージ システムであり、 ブラウザに表示される情報です通常の検索に加えて、 put アクションのほか、IndexedDB はトランザクションもサポートしており、 大量の構造化データの保存に使用されています

IndexedDB の各データベースはオリジンに固有です （通常はサイトのドメインまたはサブドメイン）。つまり、アクセスもアクセスもできない トラフィックを許可します。データ ストレージの上限 通常は大きなサイズ（存在している場合）だが、処理するブラウザはブラウザによって異なる 方法が異なります参考資料をご覧ください。 ご確認ください。

IndexedDB の用語

データベース
IndexedDB の最高レベル。これにはオブジェクト ストアが含まれており、 保持するデータを格納するコンポーネントです。複数のデータベースを
名前は自由に選べます。
オブジェクト ストア
リレーショナル データベースのテーブルと同様に、データを保存する個別のバケット。 通常は、型ごとに 1 つのオブジェクト ストアがあります（JavaScript データではありません）。 種類など）に分けられます。データベース テーブルとは異なり、JavaScript データは 1 つのストア内のデータ型に一貫性は 必要ありませんたとえば、アプリが 3 人の人物に関する情報を含む people オブジェクト ストアがある。 人の年齢のプロパティは、53、'twenty-five'、unknown などです。
Index
別のオブジェクト ストア（ 参照オブジェクト ストアなど）を、データの個々のプロパティごとに指定できます。インデックスが使用されている このプロパティによってオブジェクト ストア内のレコードを取得します。たとえば 名前、年齢、ユーザーごとに後で取得しておきましょう。 好きな動物です。
オペレーション
データベースとのやり取り。
Transaction
データベースを保証するオペレーションまたはオペレーション グループのラッパー 完全性。トランザクション内のアクションのいずれかが失敗すると、どのアクションも実行されない 適用され、データベースがトランザクション実行前の状態に戻る 始まりました。IndexedDB の読み取りまたは書き込みオペレーションはすべて、トランザクションの一部である必要があります。 これにより、競合のリスクなしにアトミックな読み取り - 変更 - 書き込みオペレーションが可能になります。 データベースを操作する他のスレッドと同時に行う場合です。
Cursor
データベース内の複数のレコードを反復処理するメカニズム。

IndexedDB がサポートされているかどうかを確認する方法

IndexedDB はほぼ普遍的にサポートされています。 ただし、古いブラウザを使用する場合は、 機能検出のサポートも 必要ありません最も簡単な方法は、window を確認することです。 オブジェクト:

function indexedDBStuff () {
  // Check for IndexedDB support:
  if (!('indexedDB' in window)) {
    // Can't use IndexedDB
    console.log("This browser doesn't support IndexedDB");
    return;
  } else {
    // Do IndexedDB stuff here:
    // ...
  }
}

// Run IndexedDB code:
indexedDBStuff();

データベースを開く方法

IndexedDB では、任意の名前で複数のデータベースを作成できます。条件 開こうとしたときにデータベースが存在しない場合は、自動的に作成されます。 データベースを開くには、idb ライブラリの openDB() メソッドを使用します。

import {openDB} from 'idb';

async function useDB () {
  // Returns a promise, which makes `idb` usable with async-await.
  const dbPromise = await openDB('example-database', version, events);
}

useDB();

このメソッドは、データベース オブジェクトに解決される Promise を返します。 openDB() メソッドを使用し、名前、バージョン番号、設定するイベント オブジェクトを指定します。 データベースを起動できます

openDB() メソッドの例を以下に示します。

import {openDB} from 'idb';

async function useDB () {
  // Opens the first version of the 'test-db1' database.
  // If the database does not exist, it will be created.
  const dbPromise = await openDB('test-db1', 1);
}

useDB();

IndexedDB のサポートのチェックは、匿名関数の先頭に配置します。この ブラウザが IndexedDB をサポートしていない場合、関数を終了します。関数が 次に、openDB() メソッドを呼び出して、'test-db1' という名前のデータベースを開きます。 この例では、オプションの events オブジェクトは省略してあります。 IndexedDB で意味のある処理を行うには、この引数を指定する必要があります。

オブジェクト ストアの使用方法

IndexedDB データベースには 1 つ以上のオブジェクト ストアが含まれ、各オブジェクト ストアには 別の列はキーに、別の列はそのキーに関連付けられているデータになります。

オブジェクト ストアを作成する

適切に構造化された IndexedDB データベースには、タイプごとに 1 つのオブジェクト ストアが必要です 永続化する必要があるデータの量です。たとえば、サイトの閲覧時間を プロフィールとメモには、person を含む people オブジェクト ストアが含まれている可能性があります。 オブジェクト、note オブジェクトを含む notes オブジェクト ストアです。

データベースの整合性を確保するため、オブジェクト ストアの作成や削除は openDB() 呼び出し内のイベント オブジェクト。イベント オブジェクトが upgrade() を公開する これを使用してオブジェクトストアを作成できます呼び出し createObjectStore() upgrade() メソッド内で使用して、オブジェクト ストアを作成します。

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('example-database', 1, {
    upgrade (db) {
      // Creates an object store:
      db.createObjectStore('storeName', options);
    }
  });
}

createStoreInDB();

このメソッドは、オブジェクト ストアの名前とオプションの構成を受け取ります。 このオブジェクトを使用すると、オブジェクト ストアのさまざまなプロパティを定義できます。

createObjectStore() の使用例を次に示します。

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db1', 1, {
    upgrade (db) {
      console.log('Creating a new object store...');

      // Checks if the object store exists:
      if (!db.objectStoreNames.contains('people')) {
        // If the object store does not exist, create it:
        db.createObjectStore('people');
      }
    }
  });
}

createStoreInDB();

この例では、イベント オブジェクトを openDB() メソッドに渡して、 これでオブジェクトストアが作成されます 以前と同様にオブジェクトストアの作成は をイベント オブジェクトの upgrade() メソッドで指定。ただし、ブラウザは 既存のオブジェクト ストアを作成しようとすると、エラーが発生するため、 チェックを行う if ステートメントで createObjectStore() メソッドをラップする オブジェクト ストアが存在するかどうかがわかります。if ブロック内で、次の関数を呼び出します。 createObjectStore() を使用して、'firstOS' という名前のオブジェクト ストアを作成します。

主キーを定義する方法

オブジェクト ストアを定義する際、オブジェクト ストア内でデータを一意に識別する方法を 主キーを使用して ストアを暗号化します主キーを定義するには、Terraform で 鍵生成ツールを使用できます。

鍵のパスは、常に存在し、一意の値を含むプロパティです。対象 たとえば、people オブジェクト ストアの場合、メールアドレス 次のように指定します。

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('people')) {
        db.createObjectStore('people', { keyPath: 'email' });
      }
    }
  });
}

createStoreInDB();

この例では、'people' というオブジェクト ストアを作成し、email プロパティを主キーとして keyPath オプションで指定する必要があります。

autoIncrement などのキー生成ツールを使用することもできます。キー生成ツール は、オブジェクト ストアに追加されたオブジェクトごとに一意の値を作成します。デフォルトでは キーを指定しない場合、IndexedDB がキーを作成して個別に保存します。 予測します。

次の例では、'notes' というオブジェクト ストアを作成し、 自動インクリメント番号として自動的に割り当てられる主キー:

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('notes')) {
        db.createObjectStore('notes', { autoIncrement: true });
      }
    }
  });
}

createStoreInDB();

次の例は前の例と似ていますが、 自動インクリメント値が 'id' という名前のプロパティに明示的に割り当てられます。

import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('logs')) {
        db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
      }
    }
  });
}

createStoreInDB();

キーの定義に使用する方法は、データによって異なります。お使いの データに常に一意のプロパティがある場合は、keyPath にして この一意性を適用しますそれ以外の場合は、自動インクリメントの値を使用します。

次のコードでは、3 つのオブジェクト ストアを作成し、 オブジェクト ストアでの主キーの定義:

import {openDB} from 'idb';

async function createStoresInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('people')) {
        db.createObjectStore('people', { keyPath: 'email' });
      }

      if (!db.objectStoreNames.contains('notes')) {
        db.createObjectStore('notes', { autoIncrement: true });
      }

      if (!db.objectStoreNames.contains('logs')) {
        db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
      }
    }
  });
}

createStoresInDB();

インデックスの定義方法

インデックスは、参照からデータを取得するために使用されるオブジェクト ストアの一種 オブジェクト ストアに格納します。インデックスは参照オブジェクト内にあり 同じデータを格納しますが、指定されたプロパティを 参照ストアの主キーの代わりに使用されます。インデックスは 保存すると、オブジェクト ストアを作成して、 保護します。

インデックスを作成するには、createIndex() を呼び出します。 メソッドをオブジェクト ストア インスタンスで実行します。

import {openDB} from 'idb';

async function createIndexInStore() {
  const dbPromise = await openDB('storeName', 1, {
    upgrade (db) {
      const objectStore = db.createObjectStore('storeName');

      objectStore.createIndex('indexName', 'property', options);
    }
  });
}

createIndexInStore();

このメソッドは、インデックス オブジェクトを作成して返します。createIndex() メソッド: オブジェクト ストアのインスタンスは、新しいインデックスの名前を最初のインデックスとして受け取り、 2 つ目の引数は、データを取得するデータのプロパティを あります。最後の引数では、2 つのオプションを定義し、 インデックスが動作する: unique と multiEntry。unique が true に設定されている場合、 インデックスでは、1 つのキーに重複した値が許容されません。次は、multiEntryです。 インデックス付けされたプロパティが配列の場合に createIndex() がどのように動作するかを決定します。条件 true に設定されている場合、createIndex() は各配列のインデックスにエントリを追加します。 要素です。それ以外の場合は、配列を含む単一のエントリを追加します。

次の例をご覧ください。

import {openDB} from 'idb';

async function createIndexesInStores () {
  const dbPromise = await openDB('test-db3', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('people')) {
        const peopleObjectStore = db.createObjectStore('people', { keyPath: 'email' });

        peopleObjectStore.createIndex('gender', 'gender', { unique: false });
        peopleObjectStore.createIndex('ssn', 'ssn', { unique: true });
      }

      if (!db.objectStoreNames.contains('notes')) {
        const notesObjectStore = db.createObjectStore('notes', { autoIncrement: true });

        notesObjectStore.createIndex('title', 'title', { unique: false });
      }

      if (!db.objectStoreNames.contains('logs')) {
        const logsObjectStore = db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
      }
    }
  });
}

createIndexesInStores();

この例では、'people' と 'notes' のオブジェクト ストアにインデックスがあります。宛先 インデックスを作成するには、まず createObjectStore() の結果（オブジェクト store オブジェクト）を変数に格納し、そのオブジェクトで createIndex() を呼び出せるようにします。

データの操作方法

このセクションでは、データを作成、読み取り、更新、削除する方法について説明します。これらの オペレーションはすべて非同期です。Promise が使用されます。 できます。これにより、API が簡素化されます。イベントによってトリガーされる 返されたデータベース オブジェクトで .then() を呼び出すことができます。 openDB()メソッドを使用してデータベースとの対話を開始するか、await あります。

IndexedDB のデータ オペレーションはすべてトランザクション内で実行されます。各 次の形式になります。

  1. データベース オブジェクトを取得します。
  2. データベースでトランザクションを開きます。
  3. トランザクション時にオブジェクト ストアを開きます。
  4. オブジェクト ストアに対するオペレーションの実行。

トランザクションは、オペレーションまたはグループの安全なラッパーと考えることができます。 学びました。トランザクション内のアクションの 1 つが失敗すると、そのトランザクションの ロールバックされます。トランザクションは 1 つ以上のオブジェクトストアに固有です 取引を開く際に定義します読み取り専用または読み取り可能 書き込みます。これは、トランザクション内のオペレーションが データベースに変更を加えたりすることです。

データを作成する

データを作成するには、add() を呼び出します。 メソッドを実行し、追加するデータを渡します。add() メソッドの 1 つ目の引数は、データの追加先のオブジェクト ストアであり、 2 番目の引数は、必要なフィールドと関連データを含むオブジェクトです。 追加できます。1 行のデータを追加する最もシンプルな例を次に示します。

import {openDB} from 'idb';

async function addItemToStore () {
  const db = await openDB('example-database', 1);

  await db.add('storeName', {
    field: 'data'
  });
}

addItemToStore();

各 add() 呼び出しはトランザクション内で行われます。そのため、Promise が解決された場合でも、 必ずしもオペレーションが成功したことを意味するわけではありません。Google Cloud コンソールの 追加操作が行われたら、そのデータが transaction.done() メソッドを使用してトランザクションが完了する。これは トランザクションが完了したときに解決され、トランザクションが完了した場合は拒否される Promise です。 トランザクションエラーを検出しますこのチェックは、すべての「write」と運用、 なぜなら、データベースの変更が実際に行われたことを 発生しました。

次のコードは、トランザクション内での add() メソッドの使用を示しています。

import {openDB} from 'idb';

async function addItemsToStore () {
  const db = await openDB('test-db4', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('foods')) {
        db.createObjectStore('foods', { keyPath: 'name' });
      }
    }
  });
  
  // Create a transaction on the 'foods' store in read/write mode:
  const tx = db.transaction('foods', 'readwrite');

  // Add multiple items to the 'foods' store in a single transaction:
  await Promise.all([
    tx.store.add({
      name: 'Sandwich',
      price: 4.99,
      description: 'A very tasty sandwich!',
      created: new Date().getTime(),
    }),
    tx.store.add({
      name: 'Eggs',
      price: 2.99,
      description: 'Some nice eggs you can cook up!',
      created: new Date().getTime(),
    }),
    tx.done
  ]);
}

addItemsToStore();

データベースを開いたら（必要に応じてオブジェクト ストアを作成）、 トランザクションに対して transaction() メソッドを呼び出してトランザクションを開きます。この方法は は、取引を行う店舗とモードを引数として受け取ります。 ここではストアへの書き込みが目的のため、 'readwrite' を指定します。

次に、トランザクションの一環としてショップに商品を追加します。 上記の例では、'foods' に対する 3 つのオペレーションを処理しています。 それぞれが Promise を返すようにします。

  1. 美味しいサンドイッチのレコードを追加します。
  2. エッグの数々の記録を追加しています。
  3. 取引が完了したことを通知（tx.done）。

これらのアクションはすべて Promise に基づくため、 完了します。これらの Promise を Promise.all 人間工学的に優れた方法です。Promise.all は、次の配列を受け入れます。 Promise し、渡されたすべての Promise が解決されたときに終了します。

追加する 2 つのレコードの場合、トランザクション インスタンスの store インターフェース add() を呼び出して、そこにデータを渡します。Promise.all の呼び出しをawaitできます トランザクションが完了すると終了します。

データを読み取る

データを読み取るには、get() を呼び出します。 メソッドを、openDB() メソッドを使用して取得したデータベース インスタンスに対して実行します。 get() は、ストアの名前と、オブジェクトの主キーの値を受け取ります。 指定します。基本的な例を次に示します。

import {openDB} from 'idb';

async function getItemFromStore () {
  const db = await openDB('example-database', 1);

  // Get a value from the object store by its primary key value:
  const value = await db.get('storeName', 'unique-primary-key-value');
}

getItemFromStore();

add() と同様に、get() メソッドは Promise を返すため、次の場合に await できます。 Promise の .then() コールバックを使用します。

次の例では、'test-db4' データベースの get() メソッドを使用して、 'foods' オブジェクト ストアを使用して、'name' 主キーで 1 行を取得します。

import {openDB} from 'idb';

async function getItemFromStore () {
  const db = await openDB('test-db4', 1);
  const value = await db.get('foods', 'Sandwich');

  console.dir(value);
}

getItemFromStore();

データベースから単一の行を取得するは非常に簡単です。 使用して、変更対象の行のオブジェクト ストアと 指定します。get() メソッドは Promise を返すため、次のことができます。 await。

データの更新

データを更新するには、put() を呼び出します。 オブジェクト ストア上のメソッドです。put() メソッドは add() メソッドと類似しています。 また、add() の代わりに使用してデータを作成することもできます。これが基本的な例です。 put() を使用して、オブジェクト ストア内の行を主キー値で更新します。

import {openDB} from 'idb';

async function updateItemInStore () {
  const db = await openDB('example-database', 1);

  // Update a value from in an object store with an inline key:
  await db.put('storeName', { inlineKeyName: 'newValue' });

  // Update a value from in an object store with an out-of-line key.
  // In this case, the out-of-line key value is 1, which is the
  // auto-incremented value.
  await db.put('otherStoreName', { field: 'value' }, 1);
}

updateItemInStore();

他のメソッドと同様に、このメソッドは Promise を返します。put() を次の目的で使用することもできます。 行われます。前述の 'foods' ストアを使用した例を次に示します。 この例は、サンドイッチと卵の価格を更新します。

import {openDB} from 'idb';

async function updateItemsInStore () {
  const db = await openDB('test-db4', 1);
  
  // Create a transaction on the 'foods' store in read/write mode:
  const tx = db.transaction('foods', 'readwrite');

  // Update multiple items in the 'foods' store in a single transaction:
  await Promise.all([
    tx.store.put({
      name: 'Sandwich',
      price: 5.99,
      description: 'A MORE tasty sandwich!',
      updated: new Date().getTime() // This creates a new field
    }),
    tx.store.put({
      name: 'Eggs',
      price: 3.99,
      description: 'Some even NICER eggs you can cook up!',
      updated: new Date().getTime() // This creates a new field
    }),
    tx.done
  ]);
}

updateItemsInStore();

アイテムの更新方法は、キーの設定方法によって異なります。keyPath を設定すると、 オブジェクト ストア内の各行は、インラインキーに関連付けられています。上記の 例は、このキーに基づいて行を更新します。このテーブルの行を更新すると、 そのキーを指定して、 使用されますまた、行外のキーを作成することもできます。それには、 autoIncrement を主キーとして使用します。

データの削除

データを削除するには、delete() を呼び出します。 メソッド:

import {openDB} from 'idb';

async function deleteItemFromStore () {
  const db = await openDB('example-database', 1);

  // Delete a value 
  await db.delete('storeName', 'primary-key-value');
}

deleteItemFromStore();

add() や put() と同様に、トランザクションの一部として使用できます。

import {openDB} from 'idb';

async function deleteItemsFromStore () {
  const db = await openDB('test-db4', 1);
  
  // Create a transaction on the 'foods' store in read/write mode:
  const tx = db.transaction('foods', 'readwrite');

  // Delete multiple items from the 'foods' store in a single transaction:
  await Promise.all([
    tx.store.delete('Sandwich'),
    tx.store.delete('Eggs'),
    tx.done
  ]);
}

deleteItemsFromStore();

データベース インタラクションの構造は、 必要があります。必ず取引がすべて完了していることを Promise.all に渡す配列に tx.done メソッドを含めます。

すべてのデータを取得する

これまでは、ストアから一度に 1 つずつオブジェクトを取得していました。また、 オブジェクト ストアまたはインデックスからすべてのデータまたはサブセットを取得する getAll() メソッドまたはカーソルのいずれかを指定できます。

getAll() メソッド

オブジェクト ストアのデータをすべて取得する最も簡単な方法は、getAll() を呼び出すことです。 次のように指定します。

import {openDB} from 'idb';

async function getAllItemsFromStore () {
  const db = await openDB('test-db4', 1);

  // Get all values from the designated object store:
  const allValues = await db.getAll('storeName');

  console.dir(allValues);
}

getAllItemsFromStore();

このメソッドは、制約なしでオブジェクト ストア内のすべてのオブジェクトを返します。 ありません。オブジェクトストアからすべての値を取得する最も直接的な方法ですが、 柔軟性が最も低くなります

import {openDB} from 'idb';

async function getAllItemsFromStore () {
  const db = await openDB('test-db4', 1);

  // Get all values from the designated object store:
  const allValues = await db.getAll('foods');

  console.dir(allValues);
}

getAllItemsFromStore();

この例では、'foods' オブジェクト ストアで getAll() を呼び出します。このコマンドを実行すると、 主キーで並べ替えられた 'foods' のオブジェクト。

カーソルの使用方法

カーソルを使用すると、より柔軟に複数のオブジェクトを取得できます。カーソルで選択 オブジェクト ストアまたはインデックスに 1 つずつインデックスを作成するので、 データと一緒に移動しますカーソルは、他のデータベース操作と同様に、 機能します。

カーソルを作成するには、openCursor() を呼び出します。 オブジェクト ストアに書き込まれます。'foods' ストアを使用する 前の例と同じく、前の例と同じように オブジェクト ストア:

import {openDB} from 'idb';

async function getAllItemsFromStoreWithCursor () {
  const db = await openDB('test-db4', 1);
  const tx = await db.transaction('foods', 'readonly');

  // Open a cursor on the designated object store:
  let cursor = await tx.store.openCursor();

  // Iterate on the cursor, row by row:
  while (cursor) {
    // Show the data in the row at the current cursor position:
    console.log(cursor.key, cursor.value);

    // Advance the cursor to the next row:
    cursor = await cursor.continue();
  }
}

getAllItemsFromStoreWithCursor();

この場合のトランザクションは 'readonly' モードで開かれ、 openCursor メソッドが呼び出されます。後続の while ループでは、 カーソルの現在位置の key プロパティと value プロパティを読み取ることができます。 それらの値に基づいて、組織にとって最も合理的な方法で 。準備ができたら、cursor オブジェクトの continue() を呼び出す メソッドを使って次の行に移動し、カーソルが移動したときに while ループが終了する 到達します。

範囲とインデックスでカーソルを使用する

インデックスを使用すると、オブジェクト ストア内のデータを あります。任意のプロパティにインデックスを作成できます。これは keyPath になります。 そのプロパティの範囲を指定し、そのプロパティの範囲内で getAll() またはカーソルを使用して範囲を指定できます。

IDBKeyRange オブジェクトを使用して範囲を定義します。および次のいずれか メソッド:

upperBound() メソッドと lowerBound() メソッドで上限と下限を指定する なります。

IDBKeyRange.lowerBound(indexKey);

または

IDBKeyRange.upperBound(indexKey);

それぞれ 1 つの引数として、目的のアイテムのインデックスの keyPath 値を指定します。 値の上限または下限を指定します

bound() メソッドは上限と下限の両方を指定します。

IDBKeyRange.bound(lowerIndexKey, upperIndexKey);

これらの関数の範囲は、デフォルトで範囲に含まれます。つまり、 範囲の限界として指定されたデータ。これらの値を除外するには 範囲を排他的として指定するには、true を lowerBound()、upperBound()、または関数の 3 番目と 4 番目の引数として、 下限と上限はそれぞれ bound() です。

次の例では、'foods' オブジェクトの 'price' プロパティのインデックスを使用しています。 ありますストアにはフォームも表示され 範囲の上限と下限。以下のコードを使用して、 価格帯:

import {openDB} from 'idb';

async function searchItems (lower, upper) {
  if (!lower === '' && upper === '') {
    return;
  }

  let range;

  if (lower !== '' && upper !== '') {
    range = IDBKeyRange.bound(lower, upper);
  } else if (lower === '') {
    range = IDBKeyRange.upperBound(upper);
  } else {
    range = IDBKeyRange.lowerBound(lower);
  }

  const db = await openDB('test-db4', 1);
  const tx = await db.transaction('foods', 'readonly');
  const index = tx.store.index('price');

  // Open a cursor on the designated object store:
  let cursor = await index.openCursor(range);

  if (!cursor) {
    return;
  }

  // Iterate on the cursor, row by row:
  while (cursor) {
    // Show the data in the row at the current cursor position:
    console.log(cursor.key, cursor.value);

    // Advance the cursor to the next row:
    cursor = await cursor.continue();
  }
}

// Get items priced between one and four dollars:
searchItems(1.00, 4.00);

このサンプルコードでは、まず上限の値を取得し、上限が設定されている あります。次のコードブロックでは、範囲を制限するために使用する方法を決定します。 基づきます。データベース操作で、Cloud Storage バケットでオブジェクト ストアを開き、 次に、オブジェクト ストアの 'price' インデックスを開きます。「 'price' インデックスを使用すると、価格でアイテムを検索できます。

次に、インデックス上でカーソルを開き、その範囲を渡します。カーソル 範囲内の最初のオブジェクトを表す Promise を返します。それ以外の場合は undefined を返します。 その範囲内にデータがないとしますcursor.continue() メソッドは カーソルが次のオブジェクトを表すため、次のオブジェクトが表示されるまでループが繰り返されます。 範囲の最後に到達します。

データベースのバージョニング

openDB() メソッドを呼び出すときに、データベースのバージョン番号を指定できます。 指定します。このガイドのすべての例で、このバージョンは 1 に設定します。ただし、必要に応じてデータベースを新しいバージョンにアップグレードできます。 なんらかの方法で変更します。指定したバージョンが、指定したバージョンより新しい場合は、 イベント オブジェクト内の upgrade コールバックが実行され、 新しいオブジェクト ストアとインデックスをデータベースに追加できます。

upgrade コールバックの db オブジェクトには、特別な oldVersion プロパティがあります。 ブラウザがアクセスできるデータベースのバージョン番号を示します。 このバージョン番号を switch ステートメントに渡して、次のブロックを実行できます。 既存のデータベース バージョンに基づく upgrade コールバック内のコード あります。次の例をご覧ください。

import {openDB} from 'idb';

const db = await openDB('example-database', 2, {
  upgrade (db, oldVersion) {
    switch (oldVersion) {
      case 0:
        // Create first object store:
        db.createObjectStore('store', { keyPath: 'name' });

      case 1:
        // Get the original object store, and create an index on it:
        const tx = await db.transaction('store', 'readwrite');
        tx.store.createIndex('name', 'name');
    }
  }
});

この例では、データベースの最新バージョンを 2 に設定します。このコードが が最初に実行されますが、データベースはまだブラウザに存在しないため、oldVersion 0 で、switch ステートメントは case 0 から始まります。この例では、 'store' オブジェクト ストアをデータベースに追加します。

重要なポイント: switch ステートメントでは、通常、各 case の後に break が 1 つ存在します。 ブロックしていますが、ここでは意図的に使用していません。こうすれば、既存の そのバージョンが存在しない場合、コードが 更新されるまで、残りの case ブロックを実行してください。この例では、 ブラウザは case 1 を介して実行を継続し、name インデックスを store オブジェクト ストア。

'store' オブジェクト ストアに 'description' インデックスを作成するには、 新しい case ブロックを次のように追加します。

import {openDB} from 'idb';

const db = await openDB('example-database', 3, {
  upgrade (db, oldVersion) {
    switch (oldVersion) {
      case 0:
        // Create first object store:
        db.createObjectStore('store', { keyPath: 'name' });

      case 1:
        // Get the original object store, and create an index on it:
        const tx = await db.transaction('store', 'readwrite');
        tx.store.createIndex('name', 'name');

      case 2:
        const tx = await db.transaction('store', 'readwrite');
        tx.store.createIndex('description', 'description');
    }
  }
});

前の例で作成したデータベースがブラウザにまだ存在する場合は、 これを実行すると、oldVersion は 2 になります。ブラウザは case 0 をスキップし、 case 1 です。case 2 内のコードを実行して description を作成します。 あります。その後、ブラウザには store を含むバージョン 3 のデータベースがあります。 name インデックスと description インデックスを持つオブジェクト ストア。

関連情報

以下のリソースでは、IndexedDB の使用に関する詳細情報とコンテキストを提供しています。

IndexedDB のドキュメント

データ ストレージの上限