2016/07/10

[JavaScript]Indexed Database APIでデータを取得

ObjectStoreにデータを登録するところまではできたので、次は、実際にデータを取得する方法について。

var db;
var indexedDBName = 'localDB';
var storeName = 'localStore';
var version = 1;
var indexedDB;
indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

//var openRequest = indexedDB.open(indexedDBName,version);
openRequest.onupgradeneeded = function(e) {
  db = e.target.result;
  db.createObjectStore(storeName,{
    keyPath:'id',
    autoIncrement:true
  });
};
openRequest.onsuccess = function(e) {
  db = e.target.result;
  /*
  var transaction = db.transaction([storeName],'readonly');
  var store = transaction.objectStore(storeName);
  var request = store.count();
  request.onsuccess = function(e){
    var count = e.target.result;
    console.log(count)
  };
  request.onerror = function(e){
  };
  transaction.oncomplete = function(){
  };
  */

  /*
  var transaction = db.transaction([storeName],'readwrite');
  var store = transaction.objectStore(storeName);
  var request = store.put({
    hoge : 'bar'
  });
  request.onsuccess = function(e){
  };
  request.onerror = function(e){
  };
  request.onabort = function(e){
  };
  transaction.oncomplete = function(){
  };
  */

  var transaction = db.transaction([storeName],'readonly');
  var store = transaction.objectStore(storeName);
  var request = store.openCursor();
  request.onsuccess = function(e){
    var cursor = e.target.result;
    if(cursor == null){
      return;
    }
    var data = cursor.value;
    var localKey = cursor.key;
    console.log (localKey)
    console.log (data.hoge)
    cursor.continue();
  };
  request.onerror = function(e){
  };
  transaction.oncomplete = function(){
  };

};
openRequest.onerror = function(e) {
};

で、実行したら、確かにデータ取得できた。

参考
【HTML5】Indexed Database API を真面目に勉強してみる
[HTML5] Indexed DBで検索結果をキャッシュする #2

0 コメント:

コメントを投稿