この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Indexed DBで検索結果をキャッシュする #1 の続きです。
実装2>
データ構造
テストデータはタブ改行区切りとし、以下のオブジェクトに変換してオブジェクトストアに格納します。
{
id:連番,
name:"氏名",
nameKana:"氏名カナ",
sex:"性別",
bloodtype:"血液型",
birthday:"誕生日",
zipcode:"郵便番号",
address:"住所",
addressKana:"住所カナ"
}
画面
ソート項目・ページ数を選択するプルダウンと、一覧のテーブル、詳細表示で構成された画面を用意します。
<select id="sort">
<option value="">id</option>
<option value="byNameKana">氏名カナ</option>
<option value="byZipcode">郵便番号</option>
</select>
<select id="pager"></select>
<input id="nameKana" type="text" placeholder="氏名カナ" />
<button id="find">find</button>
<table id="personTable">
<thead>
<tr>
<th>id</th>
<th>氏名</th>
<th>氏名カナ</th>
<th>郵便番号</th>
</tr>
</thead>
<tbody></tbody>
</table>
<dl>
<dt>id</dt><dd id="lId"></dd>
<dt>氏名</dt><dd id="lName"></dd>
<dt>氏名カナ</dt><dd id="lNameKana"></dd>
<dt>性別</dt><dd id="lSex"></dd>
<dt>血液型</dt><dd id="lBloodType"></dd>
<dt>誕生日</dt><dd id="lBirthday"></dd>
<dt>郵便番号</dt><dd id="lZipcode"></dd>
<dt>住所</dt><dd id="lAddress"></dd>
<dt>住所カナ</dt><dd id="lAddressKana"></dd>
</dl>
データベース初期化
Indexed DB を使用する準備を行います。
//データベース名
var DB_NAME = 'indexed_db_sample';
//オブジェクトストア名
var STORE_NAME = 'person';
//データベース
var db;
//データベース接続
var rq = indexedDB.open(DB_NAME);
//データベースが無い場合は作成する
rq.onupgradeneeded = function(result) {
db = this.result;
//オブジェクトストアの作成
var store = db.createObjectStore(STORE_NAME, {
keyPath: 'id', //「id」フィールドをキーとする
autoIncrement: false, //キーの自動採番オフ
});
//インデックスの作成
store.createIndex('byNameKana', 'nameKana');
store.createIndex('byZipcode', 'zipcode');
};
//接続完了
rq.onsuccess = function() {
//データ取得処理・・・
}
indexedDB オブジェクトの open メソッドでデータベースを開きます。もしデータベースが存在しない場合、onupgradeneeded のコールバックが呼び出されます。このコールバック内は特別なトランザクションがアクティブとなっており、ここでのみオブジェクトストアやインデックスの作成が行えます。トランザクションについては後程もう少し詳しく説明します。
ここでは、"person" という名前で、オブジェクトストアを作ります。id をキーとし、nameKana と zipcode にインデックスを作成します。