2016/07/12

[JavaScript]Indexed Database APIで容量チェック

Indexed Database APIは、端末のローカルディスクを使うため必然的に容量が決まっています。

そこで、トランザクションが発生した場合に、容量いっぱいで登録できなかった場合はどうすればいいのだろうか?

モダンブラウザのストレージ容量まとめ
によると、以下のように組めばおkみたいです。

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){
    var error = e.target.error;
    if(error.name == 'QuotaExceededError'){
      console.log("容量エラーです")
    }
  };
  transaction.oncomplete = function(){
  };
  

  /*
  var localKeys = [];
  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;
    localKeys[localKeys.length] = localKey;
    console.log (localKey)
    console.log (data.hoge)
    cursor.continue();
  };
  request.onerror = function(e){
  };
  transaction.oncomplete = function(){
    //実際は、oncompleteで繰り返し削除を行う必要性がある。
    var transaction = db.transaction([storeName],'readwrite');
    var store = transaction.objectStore(storeName);
    var request = store.delete(localKeys[0]);
    request.onsuccess = function(e){
    };
    request.onerror = function(e){
    };
    transaction.oncomplete = function(){
    };
  };
  */
};
openRequest.onerror = function(e) {
};

参考
【HTML5】Indexed Database API を真面目に勉強してみる
[HTML5] Indexed DBで検索結果をキャッシュする #2
モダンブラウザのストレージ容量まとめ

0 コメント:

コメントを投稿