html5本地存储之indexedDb

对于以下需求：

• 离线存储读取数据

• 允许用户对数据进行增删改操作

• 数据存储在本地，不依赖后端

• 数据支持索引查询

我们可以考虑使用html5新特性的本地存储，主要有以下几种：

• Web Sql(IE,FF都不支持,http://www.w3.org/TR/webdatabase/)

• IndexedDB

• Local Storage(轻松存储简单的数据结构，如果存储复杂的较麻烦)

• Session Storage(同Localstorage)

• Cookies(有限制)

• Application Cache(随后介绍)

我们可以考虑使用indexedDb来实现功能：

  首先定义数据库对象

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操作：

Create：

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
            })
        }
    }
}

本文出自 “Eason's hcc” 博客，请务必保留此出处http://hcc0926.blog.51cto.com/172833/1588676