IndexedDB 增删改查 简单的库
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="IndexedDb.js"></script>
<script> //初始化数据库 //1.新建数据库
//2.新建表
//3.创建数据表对应的Data Model var dbInfo = []; //新建数据库的信息
var dbversion = 2;
var dbname = 'newdb'; var tables = {//表名字的枚举值
cost: 'Cost',
user: 'User',
catgory: 'Catgory' } var costTable = {//消费表
name: tables.cost, //表名字
fields: ['catgory', 'cost', 'date', 'description'],//字段
index: [//索引
{key: 'date', unique: true} //索引键名，是否唯一
]
}
var catgoryTable = {//类别表
name: tables.catgory,
fields: ['catgory'],
index: [//索引
{key: 'catgory', unique: true}
] }
var userTable = {//用户表
name: tables.user,
fields: ['phone', 'pwd', 'uid', 'uname'],
index: [//索引
{key: 'uid', unique: true},
{key: 'uname', unique: true}
]
} dbInfo.push(costTable);
dbInfo.push(catgoryTable);
dbInfo.push(userTable); Index.create(dbname, dbInfo, null, null, dbversion); //初始化数据库完毕 //Data Model 的 增删改查方法
window.onload = function () {
//实例化一个对象
var user = new User({uname: 'joe0.453569732606411'}); //添加一条数据
user.add({}, function (data) {
if (data == 'complete') {
console.log('add success;');
//do something you want
}
}); //更新一条数据
user.update({uid: 123}, function (data) {
if (data == 'success') {
console.log('update success;');
//do something you want
}
else {
//not find this item to uopdate
} }); //获取数据表的所有数据
user.get(function (data) {
console.log('get success');
data.forEach(function (item) {
var div = document.createElement('div');
div.innerText = item.uname + ':' + item.uid;
document.body.appendChild(div);
})
}); //删除一条数据
user.delete(function (data) {
if (data == 'success') {
console.log('delete success;');
//do something you want
} else {
//not get this item to delete
}
}) } </script>
</head>
<body>
</body>
</html>
下面是IndexedDb.js
/**
* Created by 宇乔 on 13-11-12.
*/ (function (window) {
var A = {
create: function (dbname, dbInfo, successFn, errorFn, version) { var me = this;
this.dbName = dbname;
this.version = version;
for (var i = 0, len = dbInfo.length; i < len; i++) {
me.generateModel(dbInfo[i]);
}
this.open(dbname, version,
function success(request) {
if (me.isFunction(successFn)) {
successFn.call(this, request);
}
},
function error() {
if (me.isFunction(errorFn)) {
errorFn.call(this);
}
},
function update(event) {
for (var i = 0, len = dbInfo.length; i < len; i++) {
var info = dbInfo[i];
var objectStore = event.currentTarget.result.createObjectStore(info.name,
{ keyPath: "id", autoIncrement: true });
for (var j = 0, l = info.index.length; j < l; j++) {
objectStore.createIndex(info.index[j].key || 'null', info.index[j].key || 'null', { unique: info.index[j].unique || false });
} } }, dbInfo); }, open: function (dbname, version, success, error, update, dbInfo) {
var me = this;
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;
if (!window.indexedDB) {
error.call(null);
return;
}
var req = window.indexedDB.open(dbname, version); req.onerror = function (event) {
if (me.isFunction(error)) {
error.call(this, event);
}
};
req.onsuccess = function (event) { if (me.isFunction(success)) {
success.call(this, req, event);
}
};
req.onupgradeneeded = function (event) {
if (me.isFunction(update)) { update.call(this, event);
}
};
},
getIndexFields: function (index) {
var indexfiled = [];
index.forEach(function (item) {
indexfiled.push(item['key']);
});
return indexfiled;
},
getIndex: function () { var fields = [];
var result = {};
var indexs = this.indexFields;
var that = this;
for (var i in this) {
if (this.hasOwnProperty(i)) {
if (this[i] != 'undefined') {
fields.push(i);
}
}
}
fields.forEach(function (item) {
if (indexs.indexOf(item) != -1) {
result['key'] = item;
result['value'] = that[item];
}
}); return result;
},
generateModel: function (info) {
var fName = info.name;
var fields = info.fields;
var me = this;
var cons = '';
var method = ''; fields.forEach(function (item) {
cons += 'this.' + item + '=data.' + item + ';';
}) var index = me.getIndexFields(info.index); cons += fName + '.prototype.version=' + this.version + ';' + fName + '.prototype.dbName="' + this.dbName + '";' + fName + '.prototype.tbName="' + fName + '";' + fName + '.prototype.indexFields="' + index + '";' + fName + '.prototype.fields="' + fields + '";';
var add = fName + '.prototype.add=' + function (data, fn) {
var that = this;
me.open(me.dbName,
me.version,
function success(req) {
var db = req.result;
var transaction = db.transaction(that.__proto__.tbName, "readwrite");
var itemStore = transaction.objectStore(that.__proto__.tbName);
var sourceData = that.getSourceData();
if (sourceData) {
data = sourceData
}
var request = itemStore.add(data);
request.onsuccess = function (evt) {
};
transaction.oncomplete = function (event) {
if (me.isFunction(fn)) {
fn(event.type);
db.close()
}
};
transaction.onerror = function (event) {
if (me.isFunction(fn)) {
fn(event);
db.close()
}
};
}
);
}; var getSourceData = fName + '.prototype.getSourceData=' + function () {
var me = this;
var obj = {};
var keys = Object.keys(this);
keys.forEach(function (item) {
if (me.hasOwnProperty(item)) {
obj[item] = me[item]
}
}
);
return obj;
}; var del = fName + '.prototype.delete=' + function (fn) {
var that = this;
me.open(me.dbName,
me.version,
function success(req) {
var db = req.result;
var transaction = req.result.transaction(that.__proto__.tbName, "readwrite");
var itemStore = transaction.objectStore(that.__proto__.tbName);
var getSearchData = me.getIndex.call(that);
var getData = itemStore.index(getSearchData.key).get(getSearchData.value);
getData.onsuccess = function (data) {
if (data.target.result) {
var deleteFn = itemStore.delete(data.target.result.id);
deleteFn.onsuccess = function (e) {
if (me.isFunction(fn)) {
fn(e.type);
db.close();
}
};
deleteFn.onerror = function (evt) {
if (me.isFunction(fn)) {
fn(evt);
db.close();
}
}
} else {
if (me.isFunction(fn)) {
fn("not find item to delete");
db.close();
}
}
};
getData.onerror = function (e) {
if (me.isFunction(fn)) {
fn(e);
db.close();
}
}
}
);
};
var update = fName + '.prototype.update=' + function (newData, fn) {
var that = this;
me.open(me.dbName,
me.version,
function success(req) {
var db = req.result;
var transaction = db.transaction(that.__proto__.tbName, "readwrite");
var getSearchData = me.getIndex.call(that);
var store = transaction.objectStore(that.__proto__.tbName),
itemStore = store.index(getSearchData.key).get(getSearchData.value);
itemStore.onsuccess = function (evt) {
if (evt.target.result) {
var model = evt.target.result;
for (var i in newData) {
model[i] = newData[i];
}
store.put(model);
if (me.isFunction(fn)) {
fn(evt.type);
}
db.close();
} else {
if (me.isFunction(fn)) {
fn("not find this item");
db.close();
}
}
;
itemStore.onerror = function (evt) {
if (me.isFunction(fn)) {
fn(evt);
}
db.close();
}
}
}
);
}; var get = fName + '.prototype.get=' + function (fn) {
var that = this;
me.open(me.dbName,
me.version,
function success(req) {
var db = req.result;
var transaction = req.result.transaction(that.__proto__.tbName, "readwrite");
var itemStore = transaction.objectStore(that.__proto__.tbName);
var cur = itemStore.openCursor(IDBKeyRange.lowerBound(0));
var dataList = [];
cur.onsuccess = function (evt) {
var cursor = evt.target.result;
if (cursor) {
dataList.push(cursor.value);
cursor.continue();
}
else {
if (me.isFunction(fn)) {
fn(dataList);
db.close();
}
}
};
cur.onerror = function () {
if (me.isFunction(fn)) {
fn("not get this item");
db.close();
}
}
}
);
}; eval(fName + " = function (data) {" + cons + "}");
eval(add);
eval(getSourceData);
eval(get);
eval(update);
eval(del); },
isFunction: function (o) {
return o && Object.prototype.toString.call(o) == '[object Function]';
},
isObject: function (o) {
return o && Object.prototype.toString.call(o) == '[object Object]';
} };
window['Index'] = A;
}(window))
IndexedDB 增删改查 简单的库的更多相关文章
- js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...
- WPF MVVM+EF增删改查 简单示例(二) 1对1 映射
WPF MVVM+EF增删改查 简单示例(一)实现了对学生信息的管理. 现在需求发生变更,在录入学生资料的时候同时需要录入学生的图片信息,并且一名学生只能有一张图片资料.并可对学生的图片资料进行更新. ...
- iOS sqlite 增删改查 简单封装(基于 FMDB)
/** * 对 sqlite 的使用进行简单封装,仅涉及简单的单表 增删改查 * * 基于 FMDB * * 操作基于 model ,数据库表字段与 model 属性一一对应,对 model 整 ...
- 安卓版php服务器的mysql数据库增删改查简单案例
界面: index.php文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- JAVA JDBC 增删改查简单例子
1.数据库配置文件jdbc.properties driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/test username= ...
- JDBC增删改查简单测试
首先编写一个entity以便与数据库表文件相对应 lyTable.java public class LyTable implements java.io.Serializable { private ...
- SQL基础语法的单表操作 select|insert|update|delete(增删改查) 简单使用
以下案列以此表举例 1.select(查询) select简单的查询分为两种 注:字段也就是表结构中的列的名称 第一种: select 字段名 from 表名 此种查询只列出你所需要查询的字段, ...
- SQL基础语法select|insert|update|delete(增删改查) 简单使用
以下案列以此表举例 1.select(查询) select简单的查询分为两种 注:字段也就是表结构中的列的名称 第一种: select 字段名 from 表名 此种查询只列出你所需要查询的字段, ...
- indexedDB 增删改查
/** * 打开数据库 */ export function openDB() { return new Promise((resolve, reject) => { let indexedDB ...
随机推荐
- mfc简易加法
利用vs2013只做一个只有加法的计算器: 一.新建项目,然后如下图所示,进行选择,并创建. 二.下一步. 三.选择基于对话框,之后直接点完成 四.在整个编译器的最左边找到工具箱,并点击. /** 为 ...
- Hibernate学习笔记--------4.查询
一.Get/Load Get方法是立即检索,而load是延迟检索,他们都是根据主键进行查询.在<class>标签中,若把lazy属性改为false,load方法就会立即检索,class中的 ...
- 使用CompletionService结合ExecutorService批处理任务
CompletionService用于提交一组Callable任务,其take方法返回已完成的一个Callable任务对应的Future对象. 如果你向Executor提交了一个批处理任务,并且希望在 ...
- Navicate DataModel 注册码
注册信息: 姓 名:ttrar.com 组 织:(空) 序列号:NAVD-6CLM-6BKA-5TXK 内容来自: 可视化数据库设计工具(Navicat Data Modeler)1.0. ...
- OAuth2集成——《跟我学Shiro》
http://jinnianshilongnian.iteye.com/blog/2038646 目前很多开放平台如新浪微博开放平台都在使用提供开放API接口供开发者使用,随之带来了第三方应用要到开放 ...
- SQL Server调优系列进阶篇 - 如何维护数据库索引
前言 上一篇我们研究了如何利用索引在数据库里面调优,简要的介绍了索引的原理,更重要的分析了如何选择索引以及索引的利弊项,有兴趣的可以点击查看. 本篇延续上一篇的内容,继续分析索引这块,侧重索引项的日常 ...
- [转]第一章 Windows Shell是什么 【来源：http://blog.csdn.net/wangqiulin123456/article/details/7987862】
一个操作系统外壳的不错的定义是它是一个系统提供的用户界面,它允许用户执行公共的任务,如访问文件系统,导出执行程序,改变系统设置等.MS-DOS有一个Command.COM扮演着这个角色.然而Windo ...
- Java多线程编程总结（学习博客）
Java多线程编程总结:网址:http://lavasoft.blog.51cto.com/62575/27069/
- ###STL学习--关联容器
点击查看Evernote原文. #@author: gr #@date: 2014-08-23 #@email: forgerui@gmail.com STL中的关联容器. ###stl学习 |--迭 ...
- 第一篇、CSS3_transtion的使用
<html> <head> <title>这是一个CSS3的特性</title> <style> #box{ width: 150px; h ...