web APP离线缓存实现方式

web  APP离线缓存实现方式

1、通过以下代码可以知道怎么打开数据库、怎么创建库、表，如何操作数据

var indexDB={
    db:null,
    nameDB:"DB",//数据库名称
    versionDB:"1.0",//数据库版本，版本>1;每次更改版本的值需要大于旧版本的值；如果要新建或更改表，需要更改版本号
    storeName:{"table1":"T_table1","table2":"T_table1"},//数据表名称
    netState:true,//网络状态(true.正常，false.无网络)
    /**
     * 创建并连接数据库
     */
    openDB:function(){
            indexDB.db = window.indexedDB || window.mozIndexedDB ||
                   window.webkitIndexedDB || window.msIndexedDB;
            var request = indexDB.db.open(indexDB.nameDB,indexDB.versionDB);//版本号更改后才会进入onupgradeneeded
            request.onsuccess = function(e) {
                indexDB.db = e.target.result;
                console.log("启动缓存库："+indexDB.nameDB)
            }
            request.onerror = function(e) {
                mui.alert(e.currentTarget.error.message);
            }
            request.onupgradeneeded = function(e) {
                indexDB.db = e.target.result;
                indexDB.createStore();//创建表
            }
    },
    /**
     * 关闭连接
     */
    /**
     * 创建表;
     * 首次创建数据库时创建表;
     * 另外修改表结构时需要修改版本号;
     * 如果多表之间有关联关系，需要创建create索引，便于区分多表关联的数据关系；
     * 在多表关联情况下用add进行数据关联,比如(图片表和业务属性表通过create关联，当前新增的数据他们的create的值相同)
     */
    createStore:function(){
        if(!indexDB.db.objectStoreNames.contains(indexDB.storeName["table1"])) {
                    var store = indexDB.db.createObjectStore(indexDB.storeName["table1"], {
                        keyPath: "keyId",autoIncrement:true
                    });//主键自增
                    //创建查询索引
                    store.createIndex('keyIdIndex', 'keyId', {
                        unique: true
                    });
                    store.createIndex('titleIndex','title',{unique:false});
                    store.createIndex('createIndex','create',{unique:false});
                    console.log("创建:"+indexDB.storeName["table1"])
        }
 
        //其他表...
    },
    
    /**
     * 新增数据
     * arrJsonData中需要包含create属性值
     */
    addData:function(storeName,arrJsonData){
            var transaction = indexDB.db.transaction(storeName, "readwrite")
            var store = transaction.objectStore(storeName)
            for(var i = 0; i < arrJsonData.length; i++) {
                var item = arrJsonData[i];
                item.create = indexDB.create;
                store.add(item);
            }
            console.log("缓存成功")
    },
    /**
     * 查询所有数据
     */
    readDataAll:function(storeName,func){
            var array = new Array();
            var transaction = indexDB.db.transaction(storeName, "readonly")//不根据索引查询时
            var os = transaction.objectStore(storeName)
            var request = os.openCursor();
            request.onerror = function(e) {
                console.log(request.onerror);
            }
            request.onsuccess = function(e) {
                var u = e.target.result;
                if(u) {
                    var v = u.value
                    array.push(v)
                    u.continue();
                } else {
                    //无数据
                    func(array);
                }
            }
    },
    /**
     * 根据索引查询,不支持模块查询
     * @param {Object} storeName
     * @param {Object} nameIndex 创建表时的索引名称
     * @param {Object} value    值
     * @param {Object} func
     */
    readDataByIndex:function(storeName,nameIndex,value,func){
            var array = new Array();
            var transaction = indexDB.db.transaction(storeName)
            var os = transaction.objectStore(storeName)
            var idx = os.index(nameIndex);
            idx.openCursor(IDBKeyRange.only(value)).onsuccess=function(e){
                var u=e.target.result;
                if(u){
                    var v = u.value
                    array.push(v)
                    try{
                        u.continue();
                    }catch(e){
                        func(array);
                    }
                }else {
                    //无数据
                    func(array);
                }
            }
    },
    /**
     * 修改数据
     * @param {Object} storeName
     * @param {Object} jsonData    数据
     * @param {Object} nameIndex 创建表的索引名称
     * @param {Object} value    索引值
     * @param {Object} func
     */
    updateData:function(storeName,jsonData,nameIndex,value,func){
              
             var transaction=indexDB.db.transaction(storeName,'readwrite');
             var store=transaction.objectStore(storeName);
             var idx = store.index(nameIndex);
             var request=idx.get(value);
             request.onsuccess=function(e){
                // var student=e.target.result;
                 store.put(jsonData);
                 func(e);
             };
        },
    /**
     * 删除数据
     * @param {Object} storeName
     * @param {Object} idValue id值
     */
    deleteById:function(storeName,idValue,func){
             var transaction=indexDB.db.transaction(storeName,'readwrite');
              var store=transaction.objectStore(storeName);
             var request = store.delete(idValue);
              request.onsuccess=function(e){
                      func(e);
                  
             };
             request.onerror=function(){
                     console.log("删除失败"+request.onerror)
                      func(request.onerror);
            }
    },
    /**
     * 清空表数据
     */
    clearStore:function (storeName) {
            var transaction = indexDB.db.transaction(storeName, 'readwrite');
            var store = transaction.objectStore(storeName);
            store.clear();
    },
    /**
     * 删除表
     * @param {Object} storeName
     */
    deleteStore:function(storeName){
            if(indexDB.db.objectStoreNames.contains(storeName)) {
                indexDB.db.deleteObjectStore(storeName);
            }
        },
    /**
     * 删除库
     */
    deleteDB:function(){
         window.indexedDB.deleteDatabase(indexDB.nameDB);
        console.log("删除缓存库！");
    },
    /**
     * 关闭连接
     */
    closeDB:function () {
            if(indexDB.db!=null){
                indexDB.db.close();
            }
    },
    /**
     * 是否有网络
     */
    wainshow:function(){
            if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
                //console.log("网络异常，请检查网络设置！");
                indexDB.netState=false;
            } else {
                //console.log("网络正常！");
                indexDB.netState=true;
            }
    }
}

function initIndexDB(){
    indexDB.openDB();
    document.addEventListener("netchange",function(){
         indexDB.wainshow();
         if(!indexDB.netState){
             mui.toast("网络异常!")
         }
    }, false);
    setInterval(indexDB.wainshow,1000)
}
initIndexDB();//初始化