IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。この API は高パフォーマンスなデータの検索を行うために、インデックスを使用します。Web Storage は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。本ページは、MDN における IndexedDB のランディングページです。ここでは API リファレンスへのリンク、使用ガイド、ブラウザーのサポート状況、主要なコンセプトの説明を掲載します。
メモ: IndexedDB API は強力ですが、シンプルな用途にとってはとても複雑に見えるかもしれません。シンプルな API が好ましいのでしたら、IndexedDB をより開発者フレンドリーに扱える localForage や dexie.js、ZangoDB、PouchDB、JsStore などのライブラリを検討してください。
主要概念と使用法
IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムですが、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、キーでインデックス付けされたオブジェクトを保存および取り出すことができます。Structured Clone アルゴリズムがサポートする、任意のオブジェクトを保存できます。データベースのスキーマを定義する、データベースへの接続を確立する、そして一連のトランザクションでデータの取り出しや更新を行うことが必要です。
- IndexedDB のコンセプトを詳しく知る
- IndexedDB 使用ガイドで、非同期に IndexedDB を扱い方法を基本原理から学ぶ
- Service Worker により PWA をオフラインで動作させるで概説されているように、データをオフラインに格納する IndexedDB と資産をオフラインに格納する Service Worker を組み合わせる。
メモ: たいていのウェブストレージ技術と同様に、IndexedDB も同一オリジンポリシーに従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。
同期と非同期
IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と非同期 API の両方を提供していました。同期 API は Web Worker 内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、同期 API はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。
ストレージの上限と破棄基準
クライアントサイド (すなわちローカルディスク) に何らかのデータを保存するウェブ技術がいくつかあり、IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。Browser storage limits and eviction criteria で、少なくとも Firefox ではどのようにしているかを説明しようとしています。
インターフェイス
データベースへのアクセスを行いたい場合は、window オブジェクトの indexedDB 属性上の open() を呼び出してください。このメソッドは IDBRequest オブジェクトを返します。IDBRequest オブジェクト上で発火したイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。
データベースへの接続
IDBEnvironment- IndexedDB 機能へのアクセスを提供します。
windowおよびworkerオブジェクトによって実装されています。このインターフェイスは 2.0 仕様の一部ではありません。 IDBFactory- データベースへのアクセスを提供します。
indexedDBグローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。 IDBOpenDBRequest- データベースを開くリクエストを表します。
IDBDatabase- データベース接続を表します。データベースとのトランザクション処理を行うためのみに使用されます。
データの取り出しと変更
IDBTransaction- トランザクションを表します。(アクセスしたいオブジェクトストアの) スコープを指定し、(読み取り専用または読み書き可能といった) アクセスの種類を定義して、データベースへのトランザクションを作成します。
IDBRequest- データベースへのリクエストの処理、および結果へのアクセスを提供する汎用インターフェイスです。
IDBObjectStore- IndexedDB 内のデータセットにアクセスできるオブジェクトストアを表し、主キーを使用して探索します。
IDBIndex- こちらも IndexedDB データベース内のデータのサブセットにアクセスできますが、レコードの探索に主キーではなくインデックスを使用します。
IDBObjectStoreより高速に動作する場合があります。 IDBCursor- オブジェクトストアとインデックスをイテレートします。
IDBCursorWithValue- オブジェクトストアとインデックスをイテレートして、カーソルの現在の値を返します。
IDBKeyRange- データベースから一定の範囲のデータを取り出すために使用可能な、キーの範囲を定義します。
IDBLocaleAwareKeyRange- データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (
createIndex()の optionalParameters をご覧ください) の規則によって並べ替えたキーの範囲を定義します。
カスタムイベントインターフェイス
本仕様では、以下のカスタムインターフェイスでイベントが発生します:
IDBVersionChangeEventIDBVersionChangeEventインターフェイスは、IDBOpenDBRequest.onupgradeneededイベントハンドラ関数によってデータベースのバージョンが変更されたことを表します。
廃止インターフェイス
仕様の早期段階で定義されていたインターフェイスの一部が、現在、削除されています。以前書いたコードを最新の仕様に合わせて更新する際に必要になるであろうことから、削除されたインターフェイスに関するドキュメントは残してあります:
IDBVersionChangeRequest- データベースのバージョンの変更リクエストを表現します。データベースのバージョンを変更する方法が (
IDBDatabase.setVersionではなくIDBFactory.openを呼び出すように) 変わりました。また削除されたIDBVersionChangeRequestに代わりIDBOpenDBRequestインターフェイスが用意されています。 IDBDatabaseException- データベース操作が実行されている間に発生した例外状況を表します。
IDBTransactionSync- 同期型の
IDBTransactionです。 IDBObjectStoreSync- 同期型の
IDBObjectStoreです。 IDBIndexSync- 同期型の
IDBIndexです。 IDBFactorySync- 同期型の
IDBFactoryです。 IDBEnvironmentSync- 同期型の
IDBEnvironmentです。 IDBDatabaseSync- 同期型の
IDBDatabaseです。 IDBCursorSync- 同期型の
IDBCursorです。
例
- eLibri: Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。
- To-do Notifications (ライブデモ): リファレンスドキュメントで例示している、参考アプリケーションです。
- Storing images and files in IndexedDB
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Indexed Database API 2.0 | 勧告 | |
| Indexed Database API | 勧告 | 初回定義 |
関連情報
- localForage: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。
- dexie.js: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。
- ZangoDB: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルターリング、射影、ソート、アップデート、集計をサポートしています。
- JsStore: SQL 風の構文による IndexedDB のラッパーです。
- MiniMongo: クライアントサイドのインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。
- PouchDB: クライアントサイドのブラウザー内の CouchDB 実装で IndexedDB を使っています。