Indexed Databaseの使い方 03

Indexed Databaseについての第三番目の記事になります。
正直ここまで書いて、後悔してます。
なんでかって？
あまり準備もせずに書いてるからです。
読者の皆様は、実際に動く例を見せてくれって思ってるかもしれません。
見せたいのも山々ですが、JavaScriptを独学で作ったので、非常に醜く、見せるのは恥ずかしいコードでして。
だからといって、この記事のために1からプログラム書くには、まだJavaScriptとjQuery勉強途中で微妙です。
ごめんね。
見たい方はコメント残して下さい。
読みにくいですよ。

前回までのおさらい。

var dbName = "databasename";
var dbVersion = 1;
var indexedDB = window.indexedDB || window.webkitindexedDB || window.mozIndexedDB;
var request = indexedDB.open(dbName,dbVersion);

request.onupgradeneeded() = function(event){

var db = event.target.result;

var objectStore = db.createObjectStore("objectstorename",{keyPath:"key"})

objectStore.createIndex("firstIndex","firstIndexKeyPath");

objectStore.add({firstIndexKeyPath:"firstIndexのバリュー",key:"キーのバリュー"})

}

request.onsuccess()=function(){

var db = event.target.result;

var transaction = db.transaction("objectstorename", "readwrite");

var objectStore = transaction.objectStore("objectstorename");

objectStore.add({firstIndexKeyPath:"firstIndexのバリュー",key:"キーのバリュー"});

transaction.oncomplete=function(event){

 alert("追加完了");

 }

transaction.onerror = function(event) {

 alert ('追加失敗.');

 }

db.close()

}

重ねて申し上げますが、Indexed DBの開発にはサーバーが必要です。

では、インストールされたDBを見てみましょう。

Google Chrome、FirefoxまたはOperaを使いましょう。

こんな記事書いていて、言うのもなんですが、Indexed DBはまだ使い物にならないので、システムのアーキテクチャー考え直した方が良いと思いますよ。

Google Chrome、Operaの場合はデベロッパーツールを開きます。

そして、開いたツールのResourcesをクリックします。

Firefoxの場合、Web Consoleですね。

Cookiesとか、Session Storage、Local Storageとかと一緒にIndexed DBというのがあると思います。

Indexed DBを開くと、データベースがあると思います。

なかったら、インストール出来てないか、ドメインが違う場合があります。

データベースをクリックするとObjectStoreがあります。

なかったら、上手くインストール出来てません。

その場合は、Versionをあげてonupgradeneededで再設定するか、データベースファイルを消して再インストールする必要があります。

データベースのファイルは環境によって違いますが、各ブラウザのプロファイルディレクトリーの下にあります。

各ObjectStoreを開いてみましょう。

db.createObjectStore("objectstorename",{keyPath:"key"})で作ったものです。

ObjectStore自体が、KeyValueペアのデータ構造を持っています。

ObjectStoreのKeyはKeyPathで指定したKeyです。

各ObjectStoreの下に、各Indexがあります。

この各IndexはValueのIndexになります。

もし、ObjectStore内のデータがkey:｛date: "2016-02-14", firstIndex:"pugera",secondIndex: "warosu"｝という連想配列だったとします。

このObjectStoreに、インデックスを付けます。

objectStore.createIndex("firstIndex","firstIndexKey");

objectStore.createIndex("secondIndex","secondIndexKey");

こうすることで、keyはもちろんのこと、firstIndexまたはsecondIndexを使って、該当のデータにアクセスすることができます。
この場合、dateのインデックスは付けていないので、dateでデータを参照する事は出来ません。

ObjectStoreのKeyPathを使ったアクセスの方法は、

request.onsuccess()=function(){//まずDBとの接続をして

var db = event.target.result;//DBを見つけて

var transaction = db.transaction("objectstorename", "readwrite");//ObjectStoreとの接続方法を指定し、

var objectStore = transaction.objectStore("objectstorename");//ObjectStoreを指定する。

var objectRequest = objectStore.get("key")//KeyPathのバリュー

//indexを用いる場合は

var findex = objectStore.index('firstIndex');

var firstRequest = findex.key('pugera')

var sindex = objectStore.index('secondIndex');

var secondRequest = findex.key('warosu');

};

こんな感じになります。

長くなったので、今回はこの辺で。