H5笔记-本地存储indexedDB

封装ZsfyIndexedDB

var ZsfyIndexedDB = function(){};

ZsfyIndexedDB.indexedDB_name = "db_yuxingxing";
ZsfyIndexedDB.indexedDB_version = 2.0;
ZsfyIndexedDB.db_yuxingxing;//zsfy前端数据库，供各个模块前端缓存使用

ZsfyIndexedDB.doConnection = function(onSuccessCallback){
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    if (window.indexedDB) {

        //打开数据库，没有则创建
        var openRequest = window.indexedDB.open(ZsfyIndexedDB.indexedDB_name, ZsfyIndexedDB.indexedDB_version);

        //DB数据库新建或者版本变更时回调，可以看成系统全新或升级脚本执行的入口
        openRequest.onupgradeneeded = function(e) {
            var db = e.target.result;
            if(!db.objectStoreNames.contains('LayyList')){
                console.log("创建【网上**】缓存");
                db.createObjectStore('LayyList',{autoIncrement: false});
            }

            console.log("创建前端缓存结束");
        }

         //DB成功打开时回调，由于打开IndexedDB是异步的，要确保数据库打开了再做其他操作
        openRequest.onsuccess = function(e) {
            console.log("访问前端数据库db_yuxingxing成功！");
            ZsfyIndexedDB.db_yuxingxing = e.target.result;
            if(onSuccessCallback){
                onSuccessCallback();
            }
        }

        //打开数据库失败时调用
        openRequest.onerror = function(e){
            console.log("访问前端数据库db_yuxingxing失败！");
        } 
    }
};

封装业务模块的操作LayyIndexedDB

//*************** 读写网上**缓存（前台各种保存、暂存、提交） *****************

/**
 * 新增或更新一条记录
 * @param {} layyInfo object实体
 * @param {} layyId 缓存里对应的数据主键
 */
function saveOrUpdateLayyObject(layyInfo,layyId){
    var transaction = ZsfyIndexedDB.db_yuxingxing.transaction("LayyList",'readwrite'); 
    var layystore = transaction.objectStore("LayyList"); 
    layystore.put(layyInfo,layyId);
}

/**
 * 移除一条记录
 * 客户端的缓存直到数据提交，提交后的立案信息，以外网数据库为准，就不再缓存了
 * @param {} layyId
 */
function deleteLayyObject(layyId){
    var transaction = ZsfyIndexedDB.db_yuxingxing.transaction("LayyList",'readwrite'); 
    var layystore = transaction.objectStore("LayyList"); 
    layystore.delete(layyId);
}

/**
 * 异步查询一条记录
 * 目前各大浏览器还不支持同步，兼容性也不太好
 * @param {} layyId 立案预约ID
 * @param {} getCallback 获取结果后的回调函数，不可为空！
 */
function getLayyObjectAsync(layyId,getCallback){
    var transaction = ZsfyIndexedDB.db_yuxingxing.transaction("LayyList",'readwrite'); 
    var layystore = transaction.objectStore("LayyList"); 
    layystore.get(layyId).onsuccess = getCallback;
}

客户端调用示例

    ZsfyIndexedDB.doConnection(function(){
        getLayyObjectAsync(layyId,function(e){
            var layyInfo = e.target.result;
            var dsrObjArray = layyInfo.dsrList;
        });
    }); 

总结

（1）indexDB对数据存储有大小的限制。通常每个域名的最大存数上限是250MB;
（2）数据是永久保存，除非手动删除或者手动清理浏览器数据；
（3）indexDB的操作是基于异步处理的。使用时注意顺序控制；