web APP离线缓存实现方式
2017-07-03 11:40
375 查看
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();//初始化
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 两种利用GCD实现分步获取结果的方式和SDWebImage缓存机制的验证
- HTML5应用程序缓存实现离线Web网页或应用
- WebView实现离线缓存阅读
- Android记录25-WebView实现离线缓存阅读
- Android记录25-WebView实现离线缓存阅读
- Android之 -WebView实现离线缓存阅读
- 浏览器离线缓存websql简单实现
- 两种利用GCD实现分步获取结果的方式和SDWebImage缓存机制的验证
- web程序模板的各种实现方式
- Web方式查询进度条实现
- 使用JCS在Web门户应用中实现对象缓存(2)
- Web 方式实现自动回车换行
- 利用WebRequest来实现模拟浏览器通过Post方式向服务器提交数据
- Web方式查询进度条实现
- 利用WebRequest来实现模拟浏览器通过Post方式向服务器提交数据
- 使用JCS在Web门户应用中实现对象缓存(1)
- web程序模板的各种实现方式
- web combo 的CSS实现方式
- 用WEB(ASP)方式实现SQL SERVER 数据库的备份和恢复