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 ...
随机推荐
- 权限项目总结（四） shiro 授权
概述 Authorization(授权):不难理解,授权就是用来控制当前訪问用户在訪问系统资源权限. 这个词也做证书的解释,从证书这个角度来讲,推断是否拥有对资源訪问的权限时.当前用户须要提供证书. ...
- 一个Loading 遮罩效果
1.需要两个DIV,一个用来遮罩,另一个用来显示Loading图片和文字(初始时它们是隐藏的) .gdiv_over { display: none; position: absolute; top: ...
- HTML：基本的标签
概述: <html></html>标准的语言格式,回环标签,有头和躯体部分,头里面一般显示标题title,躯体部分显示内容:背景色.文字.图片.超链接.表格.表单等. 可以直接 ...
- go语言基础之break和continue的区别
1.break和continue的区别 在循环里面有两个关键操作break和continue,break操作是跳出当前循环,continue是跳过本次循环. 2.break 备注:break可⽤于fo ...
- JQuery中简约的进度条插件推荐
JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...
- 详解Vuex常见问题、深入理解Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态?我把它理解为在data中的属性需要共 ...
- Python写的简陋版一对一聊天工具，全双工
好该睡觉了,明天还要上班~~~直接上代码,后面再总结 import threading import os import socket def RecvProcess ( UDP_Socket, Lo ...
- 时间记录APP———Time Meter
关注过时间管理的人可能都听过大名鼎鼎的柳比歇夫的时间记录法,在几年前,大多人都推荐纸笔的记录方法,但是纸笔总是会忘,越来越智能的手机可是总不会忘得,所以我始终在寻找一款手机端好用的APP. 不管是时间 ...
- Python 面向对象编程基础
Python 面向对象编程基础 虽然Pthon是解释性语言,但是Pthon可以进行面向对象开发,小到 脚本程序,大到3D游戏,Python都可以做到. 一类: 语法: class 类名: 类属性,方法 ...
- 【Unity优化】怎样实现Unity编辑器中的协程
Unity编辑器中何时须要协程 当我们定制Unity编辑器的时候,往往须要启动额外的协程或者线程进行处理.比方当运行一些界面更新的时候,须要大量计算,假设用户在不断修正一个參数,比方从1变化到2.这种 ...