html5 indexDB的使用
angular.module('indexdb', [])
.factory('indexDbJs', [function() {
const CurDBVersion = 10000;
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
var db = {
dbName: 'macImDb',
obj: {},
dbInstance: {},
errorHandler: function(error) {
// console.log('error: ' + error.target.error.message);
},
// 打开数据库，没有则自动创建
open: function(func, fail) {
// var version = db.getdbVeision();
if(db.dbName.indexOf('_')<0) {
console.error(db.dbName);
debugger;
}
var dbContent = window.indexedDB.open(db.dbName);
// dbContent.onupgradeneeded = db.upgrade;
// dbContent.onerror = db.errorHandler;
dbContent.onsuccess = function(e) {
// console.log('打开成功');
var _db = e.target.result;
db.dbInstance = dbContent.result;
db.dbInstance.onerror = function() {
};
func();
_db.close();
};
dbContent.onerror = function(e) {
var _db = e.target.result;
// console.log('打开不成功');
_db.close();
};
dbContent.onupgradeneeded = function(e) {
// console.log('更新');
var _db = e.target.result;
_db.close();
};
dbContent.onblocked = (e)=>{
console.log("onblocked");
};
},
// 关闭数据库
closeDB: function(db) {
db.close();
},
// 创建数据表
createStore: function(storeInfo, indexInfo, callback) {
var count = 0;
db.obj.stname = storeInfo.stname;
db.obj.indexInfo = indexInfo;
//创建数据库
//var version = db.getdbVeision() + 1;
// console.log(version);
// var req = window.indexedDB.open(db.dbName);
// req.onsuccess = function(e) {
// var version = e.target.result.version;
var dbContent = window.indexedDB.open(db.dbName, CurDBVersion);
// 判断数据库版本号是否更新``
// dbContent.onupgradeneeded = db.upgrade;
dbContent.onupgradeneeded = function(e) {
// console.log('更新了');
var _db = e.target.result,
names = _db.objectStoreNames;
// 此处可以创建多个表
// var name = db.obj.stname;
var name = storeInfo.stname;
if (!names.contains(name)) {
// console.log('chuagnjian');
var store = _db.createObjectStore(
db.obj.stname, {
keyPath: 'id',
autoIncrement: true
});
// 如果创建数据表时传过来的索引信息不为空则创建索引
if (db.obj.indexInfo && db.obj.indexInfo.length !== 0) {
for (var i = 0; i < db.obj.indexInfo.length; i++) {
var req = store.createIndex(db.obj.indexInfo[i].indexName, db.obj.indexInfo[i].index, { unique: false });
req.onsuccess = function() {
count++;
if (count >= indexInfo.length) {
callback(true);
_db.close();
}
};
}
} else {
callback(true);
_db.close();
}
} else {
callback(true);
_db.close();
}
},
// 创建数据库成功事件
dbContent.onsuccess = function(e) {
var _db = e.target.result;
// console.log('创建成功');
db.dbInstance = dbContent.result;
callback(true);
_db.close();
},
// 创建数据库成功事件
dbContent.onerror = function() {
// var _db = e.target.result;
// console.log('创建失败');
// callback(false);
// _db.close();
// console.log(333);
};
// }
},
/**
* 设置数据库名称
* @param dbname 数据库名称
*/
setDbName: function(dbname){
db.dbName = dbname;
},
/**
* 创建数据库和表
* @param storeInfo 表
* @param indexInfo 索引
* @param callback 回调
* @constructor
*/
CreateStores: function(storeInfo, indexInfo, callback) {
// db.obj.stname = storeInfo.stname;
db.obj.indexInfo = indexInfo;
var count = 0;
//创建数据库
//var version = db.getdbVeision();
// console.log(version);
// var req = window.indexedDB.open(db.dbName);
// req.onsuccess = function(e) {
// var version = e.target.result.version;
var dbContent = window.indexedDB.open(db.dbName, CurDBVersion);
// console.log(dbContent.getVesdion)
// 判断数据库版本号是否更新``
// dbContent.onupgradeneeded = db.upgrade;
dbContent.onupgradeneeded = function(e) {
// console.log('更新了');
var _db = e.target.result,
names = _db.objectStoreNames;
// 此处可以创建多个表
// var arr = ['dtt1', 'dttt2', 'dttt3'];
for (var i = 0; i < storeInfo.length; i++) {
var name = storeInfo[i].stname;
if (!names.contains(name)) {
var store = _db.createObjectStore(
name, {
keyPath: 'id',
autoIncrement: true
});
// 如果创建数据表时传过来的索引信息不为空则创建索引
if (db.obj.indexInfo[i] && db.obj.indexInfo[i].length !== 0) {
for (var j = 0; j < db.obj.indexInfo[i].length; j++) {
store.createIndex(db.obj.indexInfo[i][j].indexName, db.obj.indexInfo[i][j].index, { unique: false });
}
count++;
}
} else {
// callback(true);
// db.closeDB('macImDb');
//检测是否有索引更新的
var store = dbContent.transaction.objectStore(name);
for (var j = 0; j < db.obj.indexInfo[i].length; j++) {
if (!store.indexNames.contains(db.obj.indexInfo[i][j].indexName))
{
store.createIndex(db.obj.indexInfo[i][j].indexName, db.obj.indexInfo[i][j].index, {unique: false});
}
}
}
}
if (count >= storeInfo.length) {
callback(true);
}
},
// 创建数据库成功事件
dbContent.onsuccess = function(e) {
db.dbInstance = dbContent.result;
callback(true);
// db.closeDB('macImDb');
// db.dbInstance.onerror = null;
// console.log(db);
},
// 创建数据库失败事件
dbContent.onerror = function() {
callback(false);
};
// }
},
// 获得数据表
getObjectStore: function(objectStoreName, mode) {
var txn, store;
mode = mode || 'readonly';
txn = db.dbInstance.transaction([objectStoreName], mode);
store = txn.objectStore(objectStoreName);
return store;
},
// 当数据库版本更新时创建数据表
upgrade: function(e) {
// console.log('更新了');
var _db = e.target.result,
names = _db.objectStoreNames;
// 此处可以创建多个表
var name = db.obj.stname;
// console.log(db.obj.stname);
// console.log(name);
if (!names.contains(name)) {
var store = _db.createObjectStore(
db.obj.stname, {
keyPath: 'id',
autoIncrement: true
});
// 如果创建数据表时传过来的索引信息不为空则创建索引
if (db.obj.indexInfo && db.obj.indexInfo.length !== 0) {
for (var i = 0; i < db.obj.indexInfo.length; i++) {
store.createIndex(db.obj.indexInfo[i].indexName, db.obj.indexInfo[i].index, { unique: false });
}
}
}
},
// 添加数据（不负责创建表）
addStore: function(objectStoreName, data, callback) {
// 如果此处是数组在此函数内部循环，而不是循环调用add函数是否会快点。
db.open(function() {
var store, req, mode = 'readwrite';
var addNum = 0;
store = db.getObjectStore(objectStoreName, mode);
for (var i = 0; i < data.length; i++) {
var req = store.add(data[i]);
req.onsuccess = function() {
addNum++;
if (addNum >= data.length) {
callback(true);
}
};
req.onerror = function() {
callback(false);
};
}
// req = store.add(data);
// req.onsuccess = function() {
// console.log('add');
// };
// req.onerror = fail;
});
},
// 添加数据（发现没有表则创建表)
add: function(type, userId, objectStoreName, indexInfo, data, callback) {
// console.log(objectStoreName);
// console.log(data);
if (type !== null) {
objectStoreName = type + userId;
}
// console.log('add');
// indexDbJs.createStore({ stname: 'dt1' }, [], function(data) {
// console.log(data);
// })
db.createStore({ stname: objectStoreName }, indexInfo, function(result) {
if (result === true) {
// console.log(true);
// 如果此处是数组在此函数内部循环，而不是循环调用add函数是否会快点。
db.open(function() {
var store, req, mode = 'readwrite';
var addNum = 0;
store = db.getObjectStore(objectStoreName, mode);
for (var i = 0; i < data.length; i++) {
var req = store.add(data[i]);
req.onsuccess = function() {
addNum++;
if (addNum >= data.length) {
callback(true);
}
};
req.onerror = function() {
callback(false);
};
}
});
}
});
},
//更新数据表
update: function(objectStoreName, data, callback) {
db.open(function() {
var store, req, mode = 'readwrite';
var updateNum = 0;
store = db.getObjectStore(objectStoreName, mode);
if (data.length == 0) {
if (callback) {
callback(true);
}
}
for (var i = 0; i < data.length; i++) {
var req = store.put(data[i]);
req.onsuccess = function() {
updateNum++;
if (updateNum >= data.length) {
if (callback) {
callback(true);
}
}
},
req.onerror = function() {
if (callback) {
callback(true);
}
};
};
});
},
// 通过id查找数据(不加游标)
selectDataById: function(objectStoreName, id, callback) {
db.open(function() {
var store = db.getObjectStore(objectStoreName),
req = store.get(id);
req.onsuccess = function(e) {
if (!e.target.result) {
return callback(null);
}
callback(e.target.result);
};
req.onerror = function() {
callback(false);
};
});
},
// 通过自己创建的索引查找数据(不加游标)
selectSingleDataByIndex: function(objectStoreName, indexName, data, callback) {
db.open(function() {
var store = db.getObjectStore(objectStoreName);
var index = store.index(indexName);
var result = [];
var count = 0
for (var i = 0; i < data.length; i++) {
// count++;
index.get(data[i]).onsuccess = function(e) {
count++;
if (e.target.result) {
result.push(e.target.result);
}
if (count >= data.length) {
callback(result);
}
}
}
});
},
// 通过自己创建的索引查找数据(增加游标)
// selectDataByIndex: function(objectStoreName, indexName, searchData, callback) {
// db.open(function() {
// var store = db.getObjectStore(objectStoreName);
// var index = store.index(indexName);
// var data = [];
// var request = index.openCursor(IDBKeyRange.only(searchData))
// request.onsuccess = function(e) {
// var cursor = e.target.result;
// if (cursor) {
// var result = cursor.value;
// data.push(result);
// // console.log(data);
// if(result&&result!==null){
// cursor.continue();
// }else{
// }
// // console.log(result);
// }else {
// callback(data);
// }
// },
// request.onerror = callback(false);
// });
// },
// 通过自己创建的索引查找数据(增加游标)
selectDataByIndex: function(objectStoreName, indexName, searchData, callback) {
console.log('查询数据,通过自己的索引');
db.open(function() {
console.log('查询数据库');
var store = db.getObjectStore(objectStoreName);
var index = store.index(indexName);
var data = [];
console.log(searchData);
var cursor = index.openCursor(IDBKeyRange.only(searchData));
cursor.onsuccess = function(e) {
if (e.target.result) {
var result = e.target.result.value;
// var result = result.value;
// console.log(result);
data.push(result);
// console.log(data);
if (result && result !== null) {
e.target.result.continue();
} else {
console.log(result);
}
// console.log(result);
} else {
callback(data);
}
},
cursor.onerror = function() {
callback(false);
};
});
},
// 根据索引删除数据
deleteDataByIndex: function(objectStoreName, indexName, searchData, callback) {
console.log('查询数据');
db.open(function() {
console.log('查询数据库');
var store = db.getObjectStore(objectStoreName, 'readwrite');
var index = store.index(indexName);
var data = [];
var cursor = index.openCursor(IDBKeyRange.only(searchData));
cursor.onsuccess = function(e) {
if (e.target.result) {
var result = e.target.result.value;
// var result = result.value;
console.log(result);
store.delete(result.id);
// console.log(data);
if (result && result !== null) {
e.target.result.continue();
} else {
}
// console.log(result);
} else {
if(callback){
callback(true);
}
}
},
cursor.onerror = function() {
callback(false);
};
});
},
deleteDataById: function(objectStoreName, id, callback) {
db.open(function() {
var
mode = 'readwrite',
store, req;
store = db.getObjectStore(objectStoreName, mode);
// console.log('要删除的id'+id);
// console.log(typeof id);
req = store.delete(id);
req.onsuccess = function(){
// console.log('删除ok');
callback(true);
};
req.onerror = function(){
callback(false);
};
});
},
// 根据id范围获取数据
selectDataByIdRange: function(objectStoreName, indexName, startId, endId, callback) {
db.open(function() {
var store = db.getObjectStore(objectStoreName);
var index = store.index(indexName);
var boundKeyRange = IDBKeyRange.bound(startId, endId, false, true);
var data = [];
// req = store.get(id);
index.openCursor(boundKeyRange).onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
// Do something with the matches.
// console.log(cursor.value);
data.push(cursor.value);
cursor.continue();
} else {
callback(data);
}
}
});
},
// 获得一个数据表的所有数据
selectAll: function(objectStoreName, callback) {
db.open(function() {
var
store = db.getObjectStore(objectStoreName),
cursor = store.openCursor(),
data = [];
cursor.onsuccess = function(e) {
var result = e.target.result;
if (result && result !== null) {
data.push(result.value);
result.continue();
// callback(data);
} else {
callback(data);
}
};
cursor.onerror = function() {
callback(false);
};
});
},
// 清空某个数据表
// deleteAllDate: function(dbName,objectStoreName) {
// var version=db.getdbVeision()
// db.open(dbName);
// },
// 删除某个数据表
// deleteStore: function(objectStoreName) {
// db.open(function() {
// // if (db.objectStoreNames.contains(objectStoreName)) {
// db.deleteObjectStore(objectStoreName);
// // }
// });
// },
deleteAllStore: function(objectStoreName, success, fail) {
},
// 删除某个数据库
deleteDB: function(dbName) {
indexedDB.deleteDatabase(dbName);
},
// 获得数据库当前版本
getdbVeision: function() {
var dbVersion = parseInt(localStorage.getItem("dbVersion")) || 1;
dbVersion++;
localStorage.setItem("dbVersion", dbVersion);
return dbVersion;
// return +new Date();
}
};
return db;
}]);
html5 indexDB的使用的更多相关文章
- HTML5项目笔记10：使用HTML5 IndexDB设计离线数据库
之前的文章(http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html)里面描述了HTML5 离线数据存储的Web SQL,一个基于S ...
- HTML5:离线存储(缓存机制)-IndexDB
https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset ...
- html5中的indexDB
1.关系型数据库和非关系型数据库 一致性: 事务完成时,必须让所有的数据具有一致的状态,例如要写入100个数据,前99个成功了,结果第100个不合法,此时事务会回滚到最初状态.这样保证事务结束和开始时 ...
- HTML5 学习总结（三）——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼
各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已 ...
- HTML5存储之 indexedDB
IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5和CSS3新特性一览
HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...
- html5 之本地数据存储
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 cookie与webSt ...
随机推荐
- Mahout构建图书推荐系统【一起学Mahout】
阅读导读: 1.Mahout中推荐过滤算法支持哪两种算法? 2.用java代码怎样计算男性用户打分过的图书? 3.itemEuclidean.userEuclideanNoPref各自是什么算法? 1 ...
- iOS：集合视图UICollectionView、集合视图控制器UICollectionViewController、集合视图单元格UICollectionViewCell(创建表格的另一种控件)
两种创建表格方式的比较:表格视图.集合视图(二者十分类似) <1>相同点: 表格视图:UITableView(位于storyboard中,通过UIViewController控制器实现 ...
- 设计模式学习--迭代器模式(Iterator Pattern)和组合模式（Composite Pattern)
设计模式学习--迭代器模式(Iterator Pattern) 概述 ——————————————————————————————————————————————————— 迭代器模式提供一种方法顺序 ...
- c++学习之多态(虚函数和纯虚函数)
c++是面向对象语言,面向对象有个重要特点,就是继承和多态.继承之前学过了,就是一种重用类的设计方式.原有的类叫父类,或者基类,继承父类的类叫子类.在设计模式中,我们总是要避免继承,推荐用组合.因为继 ...
- linux 网络设备驱动
linux 网络驱动 谨以此文纪念过往的岁月 一.前言在linux中网络驱动也是一个大头,如何去理解网络驱动是作为一个linux驱动工程师必备的技能.不过同样的设备,在不同人的手中会有不同的效果,其原 ...
- SVG 可伸缩矢量图形 简介 Path路径
w3school:http://www.w3school.com.cn/svg/svg_intro.asp SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG ...
- c# 注册表操作,创建,删除,修改,判断节点是否存在
用.NET下托管语言C#操作注册表,主要内容包括:注册表项的创建,打开与删除.键值的创建(设置值.修改),读取和 删除.判断注册表项是否存在.判断键值是否存在. 准备工作: 1:要操作注册表,我们必须 ...
- (笔试题)N!的三进制数尾部0的个数
题目: 用十进制计算30!(30的阶乘),将结果转换成3进制进行表示的话,该进制下的结果末尾会有____个0. 思路: 这道题与上一篇博文N!尾部连续0的个数的思路是一样的. 计算N!下三进制结果末尾 ...
- C#应用视频教程1.2 Socket通信客户端实现
接下来我们尝试实现最简单的Socket客户端,为了确保只可能你的代码有问题,服务器要先用别人成熟的代码测试(这也是编程的一个技巧,先不要用自己写的客户端测试自己写的服务器,这样出了问题你也不知道谁有问 ...
- android:ViewPager动画总结
设置动画的方案: 我们能够使用ViewPager的setPageTransformer方法,为ViewPager设置动画.下面是几种常见动画的演示及效果: 1.CubeInTransformer wa ...