H5笔记-本地存储indexedDB

来源：互联网发布：2017公安部网络严打编辑：程序博客网时间：2024/06/05 06:19

封装ZsfyIndexedDB

var ZsfyIndexedDB = function(){};ZsfyIndexedDB.indexedDB_name = "db_zsfy";ZsfyIndexedDB.indexedDB_version = 2.0;ZsfyIndexedDB.db_zsfy;//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_zsfy成功！");            ZsfyIndexedDB.db_zsfy = e.target.result;            if(onSuccessCallback){                onSuccessCallback();            }        }        //打开数据库失败时调用        openRequest.onerror = function(e){            console.log("访问前端数据库db_zsfy失败！");        }     }};

封装业务模块的操作LayyIndexedDB

//*************** 读写网上立案缓存（前台各种保存、暂存、提交） *****************/** * 新增或更新一条记录 * @param {} layyInfo object实体 * @param {} layyId 缓存里对应的数据主键 */function saveOrUpdateLayyObject(layyInfo,layyId){    var transaction = ZsfyIndexedDB.db_zsfy.transaction("LayyList",'readwrite');     var layystore = transaction.objectStore("LayyList");     layystore.put(layyInfo,layyId);}/** * 移除一条记录 * 客户端的缓存直到数据提交，提交后的立案信息，以外网数据库为准，就不再缓存了 * @param {} layyId */function deleteLayyObject(layyId){    var transaction = ZsfyIndexedDB.db_zsfy.transaction("LayyList",'readwrite');     var layystore = transaction.objectStore("LayyList");     layystore.delete(layyId);}/** * 异步查询一条记录 * 目前各大浏览器还不支持同步，兼容性也不太好 * @param {} layyId 立案预约ID * @param {} getCallback 获取结果后的回调函数，不可为空！ */function getLayyObjectAsync(layyId,getCallback){    var transaction = ZsfyIndexedDB.db_zsfy.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的操作是基于异步处理的。使用时注意顺序控制；

0 0