IndexedDBとは:Webオフラインデータベースの概要と基本チュートリアル

IndexedDBとは
簡単に言えばIndexedDBはHTML 5に導入されたWebブラウザで使用できるデータベースであり、大量のデータを永続化するために使用される.Webアプリケーションに非常に強力なクエリー能力を持たせ、オフラインで作業することができます.IndexedDBのデータ操作はJSスクリプトを直接使用しており、SQL文に依存せず(最初のWeb SQLデータベースは破棄されている)、操作の戻りは非同期である.
以下、IndexedDB仕様
クライアントは、Webアプリケーションのオフラインデータに対する要件を満たすために、多数のローカルオブジェクトを格納する必要があります.[WEBSTORAGE]は、キー値ペア(key-value pair)を格納するために使用することができる.ただし、キーを順番に取得したり、値でクエリーしたり、重複したキーを保存したりすることはできません.
この仕様では、最も複雑なクエリー・プロセッサのコアである高度なキー値データベースを実装するための特定のAPIを提供します.従来のデータベースによって鍵と対応する値(各キーは複数の値に対応可能)を格納し、決定された順序で値を巡回します.通常、大量のデータを挿入または削除し、秩序化されたデータ構造を永続化します.
データベースの初期化とインデックスの作成
作成したlibraryデータベースが存在しない場合、onupgradeneededインタフェースが呼び出され、この関数でデータベースの初期化とインデックスの作成ができます.
ここではlibraryという名前のデータベースとbooksという名前のデータウェアハウス(ObjectStoreはテーブルに相当)を作成し、初期データをいくつか入力します.

var db;
var request = indexedDB.open("library");

request.onupgradeneeded = function() {
  //          ，     
  var db = request.result;
  var store = db.createObjectStore("books", {keyPath: "isbn"});
  var titleIndex = store.createIndex("by_title", "title", {unique: true});
  var authorIndex = store.createIndex("by_author", "author");

  //      
  store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
  store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
  store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});
};

request.onsuccess = function() {
  db = request.result;
};

データストレージおよびトランザクションの使用
次の例では、トランザクションを使用してデータを入力します.

var tx = db.transaction("books", "readwrite");
var store = tx.objectStore("books");

store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});

tx.oncomplete = function() {
  // All requests have succeeded and the transaction has committed.
};

データ・クエリー:索引
次の例では、インデックスを使用して本の1冊をクエリーします.

var tx = db.transaction("books", "readonly");
var store = tx.objectStore("books");
var index = store.index("by_title");

var request = index.get("Bedrock Nights");
request.onsuccess = function() {
  var matching = request.result;
  if (matching !== undefined) {
    // A match was found.
    console.log(matching.isbn, matching.title, matching.author);
  } else {
    // No match was found.
    console.log(null);
  }
};

データ・クエリー:インデックスとカーソル(cursor)インデックスとカーソル
次の例では、クエリーされたすべての一致する本をインデックスとカーソルで列挙します.

var tx = db.transaction("books", "readonly");
var store = tx.objectStore("books");
var index = store.index("by_author");

var request = index.openCursor(IDBKeyRange.only("Fred"));
request.onsuccess = function() {
  var cursor = request.result;
  if (cursor) {
    // Called for each matching record.
    console.log(cursor.value.isbn, cursor.value.title, cursor.value.author);
    cursor.continue();
  } else {
    // No more matching records.
    console.log(null);
  }
};