httml 5ローカルストレージのindexedb

7796 ワード
httml 5 indexedb
以下の需要について:
  • オフライン記憶読出しデータ
  • は、ユーザがデータを添削することを可能にする
    • .
  • データは、バックエンド
    • に依存しないローカルに格納されている.
  • データサポートインデックスクエリ
    • httml 5の新しい特性を使用したローカルストレージを考慮することができます.主に以下のような種類があります.
  • Web Sql(IE、FFはサポートしていません.http://www.w3.org/TR/webdatabase/)
  • IndexedDB
  • Local Strage(簡単なデータ構造を簡単に記憶し、複雑なデータを記憶するのが面倒くさい場合)
  • Session Strage
  • Cookies(制限あり)
  • Apple Cache(後述する)
    • indexedbを使用して機能を実現することが考えられます.
      最初にデータベースオブジェクトを定義します.
    var testDB = {
    name   : "eason",
    version: 1,
    db     : null};
    そしてデータベース初期化:
    function initDB(dbObj) {
    dbObj.version = dbObj.version || 1;    
    var request = indexedDB.open(dbObj.name, dbObj.version);
    request.onerror = function (e) {        
        console.log(e.currentTarget.error.message);
    };
    request.onsuccess = function (e) {
        dbObj.db = e.target.result;
    };
    request.onupgradeneeded = function (e) {        
    var thisDB = e.target.result;        
    if (!thisDB.objectStoreNames.contains("material")) {            
        var objStore = thisDB.createObjectStore("material", 
        {keyPath: "id", autoIncrement: true});
        objStore.createIndex("wxid", "wxid", {unique: true});
        }        
    if (!thisDB.objectStoreNames.contains("account")) {            
        var objStore = thisDB.createObjectStore("account", 
        {keyPath: "id", autoIncrement: true});
        objStore.createIndex("wxid", "wxid", {unique: true});
        objStore.createIndex("nickName", "nickName", {unique: false});
        }
    };
    データベースを閉じる:
    function closeDB(dbObj) {
    dbObj.db.close();
}
    データベースを削除:
    function deleteDB(dbObj) {
    indexedDB.deleteDatabase(dbObj.name);
}
    データベーステーブルのCRUD操作:
    クリアー:
    function addData(dbObj, tableName, data, cb) {    
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {        
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {        
        console.dir(event)
    };   
    var objectStore = transaction.objectStore(tableName);    
    var request = objectStore.add(data);
    request.onsuccess = function (e) { 
     if (cb) {
          cb({
                error: 0,
                data : data
          })
      }
    };
    request.onerror = function (e) {        
    if (cb) {
            cb({
                error: 1
            })
        }
    }
}
    データを削除:
    function deleteData(dbObj, tableName, id, cb) {    
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {        
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {        
        console.dir(event)
    };    
    var objectStore = transaction.objectStore(tableName);    
    var request = objectStore.delete(parseInt(id));
    request.onsuccess = function (e) {        
    if (cb) {
            cb({
                error: 0,
                data : parseInt(id)
            })
        }
    };
    request.onerror = function (e) {        
    if (cb) {
            cb({
                error: 1
            })
        }
    }
}
    クエリーデータ:
    (1)クエリーのすべて:
    function getDataAll(dbObj, tableName, cb) {    
    var transaction = dbObj.db.transaction(tableName, 'readonly');
    transaction.oncomplete = function () {        
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {        
        console.dir(event)
    };    
    var objectStore = transaction.objectStore(tableName);    
    var rowData = [];
    objectStore.openCursor(IDBKeyRange.lowerBound(0)).onsuccess = function (event) {            var cursor = event.target.result;        
        if (!cursor && cb) {
            cb({
                error: 0,
                data : rowData
            });            return;
        }
        rowData.push(cursor.value);
        cursor.continue();
    };
}
    (2)idに基づいてデータを検索する
    function getDataById(dbObj, tableName, id, cb) {    
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {        
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {        
    console.dir(event)
    };    
    var objectStore = transaction.objectStore(tableName);    
    var request = objectStore.get(id);
    request.onsuccess = function (e) {        
    if (cb) {
            cb({
                error: 0,
                data : e.target.result
            })
        }
    };
    request.onerror = function (e) {        
    if (cb) {
            cb({
                error: 1
            })
        }
    }
}
    (3)キーワード索引データによると:
    function getDataBySearch(dbObj, tableName, keywords, cb) {    
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {        
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {        
        console.dir(event)
    };    
    var objectStore = transaction.objectStore(tableName);    
    var boundKeyRange = IDBKeyRange.only(keywords);    var rowData;
    objectStore.index("nickName").openCursor(boundKeyRange).onsuccess = function (event)     {        var cursor = event.target.result;        
             if (!cursor) {            
             if (cb) {
                cb({
                    error: 0,
                    data : rowData
                })
            }            return;
        }
        rowData = cursor.value;
        cursor.continue();
    };
}
    (4)ページインデックスデータによると、
    function getDataByPager(dbObj, tableName, start, end, cb) {    
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {        
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {        
        console.dir(event)
    };    
    var objectStore = transaction.objectStore(tableName);    
    var boundKeyRange = IDBKeyRange.bound(start, end, false, true);    
    var rowData = [];
    objectStore.openCursor(boundKeyRange).onsuccess = function (event) {        
    var cursor = event.target.result;        
    if (!cursor && cb) {
            cb({
                error: 0,
                data : rowData
            });            return;
        }
        rowData.push(cursor.value);
        cursor.continue();
    };
}
    データの更新:
    function updateData(dbObj, tableName, id, updateData, cb) {    
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {        
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {        
        console.dir(event)
    };    
    var objectStore = transaction.objectStore(tableName);    
    var request = objectStore.get(id);
    request.onsuccess = function (e) {        
    var thisDB = e.target.result;        
    for (key in updateData) {
         thisDB[key] = updateData[key];
    }
     objectStore.put(thisDB);        
     if (cb) {
          cb({
                error: 0,
                data : thisDB
            })
        }
    };
    request.onerror = function (e) {        
    if (cb) {
            cb({
                error: 1
            })
        }
    }
}
    「Javascript権威ガイド」正規表現