IndexDB的基本操作
1.前端存储的一个数据库。
2.介绍一下基本操作。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<input type="text" id="input" / placeholder="请输入内容">
<button id="submit">写入</button>
<div id="result"></div>
<script src="./jquery-2.2.1.min.js"></script>
<script>
(function($) {
jQuery.extend({
"addData": function(options) {
var opts = $.extend(true, defaults, options);
console.log(opts);
var openRequest = indexedDB.open(opts.dbName);
openRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
var db = openRequest.result;
// 新增数据
var transaction = db.transaction(opts.tableName, "readwrite");
var store = transaction.objectStore(opts.tableName);
if (db != null && db != null) {
var request = store.add(opts.data);
request.onsuccess = function(e) {
result.innerHTML = "Employee record was added successfully.";
};
request.onerror = function(e) {
console.log(e.target.error.message);
result.innerHTML = "Employee record was not added.";
};
}
};
openRequest.onupgradeneeded = function(evt) {
var employeeStore = event.currentTarget.result.createObjectStore(opts.tableName, {
keyPath: opts.keypath
});
}
},
"deleteData": function(options) {
},
"deleteDB": function(options) {
var opts = $.extend(true, defaults, options);
var deleteDbRequest = indexedDB.deleteDatabase(opts.dbName);
deleteDbRequest.onsuccess = function(event) {
// database deleted successfully
console.log("Deleted " + options);
};
deleteDbRequest.onerror = function(e) {
console.log("Database error: " + e.target.errorCode);
};
},
"resetData": function(options) {
var openRequest = indexedDB.open(options);
openRequest.onsuccess = function(event) {
app.db = openRequest.result;
var result = document.getElementById("result");
result.innerHTML = "";
if (app != null && app.db != null) {
console.log("123", app.db)
var store = app.db.transaction("employees", "readwrite").objectStore("employees");
store.get("E1").onsuccess = function(event) {
var employee = event.target.result;
if (employee == null) {
result.value = "employee not found";
} else {
var jsonStr = JSON.stringify(employee);
employee.city = "nanjing";
console.log(employee);
store.put(employee).onsuccess = function(event) {
console.log("修改成功！");
store.get("E1").onsuccess = function(event) {
var employee = event.target.result;
result.innerHTML = JSON.stringify(employee);
}
}
}
};
}
};
openRequest.onerror = function(event) {
console.log(event)
}
},
"getData": function(options){
var openRequest = indexedDB.open(options.dbName);
openRequest.onsuccess = function(event) {
app.db = openRequest.result;
var result = document.getElementById("result");
result.innerHTML = "";
if (app != null && app.db != null) {
var store = app.db.transaction("employees").objectStore("employees");
store.get(options.index).onsuccess = function(event) {
var employee = event.target.result;
if (employee == null) {
result.value = "employee not found";
} else {
var jsonStr = JSON.stringify(employee);
result.innerHTML = jsonStr;
}
};
}
};
openRequest.onerror = function(event) {
console.log(event)
}
},
});
//默认参数
var defaults = {
dbName: "DataBase",
tableName: "table",
keypath: "id"
}
var app = {
"db": {}
};
})(window.jQuery);
// $.deleteDB("DataBase");
$.addData({"data":{"id":"E2","name":"zhangsan","age":24}});
// $.deleteDB("AAA");
// $.getData({"dbName":"AAA","index":"E9"});
// $.resetData("AAA");
</script>
</body> </html>
IndexDB的基本操作的更多相关文章
- Key/Value之王Memcached初探：二、Memcached在.Net中的基本操作
一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...
- Android Notification 详解（一）——基本操作
Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...
- Android Notification 详解——基本操作
Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...
- 三、Redis基本操作——List
小喵的唠叨话:前面我们介绍了Redis的string的数据结构的原理和操作.当时我们提到Redis的键值对不仅仅是字符串.而这次我们就要介绍Redis的第二个数据结构了,List(链表).由于List ...
- 二、Redis基本操作——String(实战篇)
小喵万万没想到,上一篇博客,居然已经被阅读600次了!!!让小喵感觉压力颇大.万一有写错的地方,岂不是会误导很多筒子们.所以,恳请大家,如果看到小喵的博客有什么不对的地方,请尽快指正!谢谢! 小喵的唠 ...
- 一、Redis基本操作——String(原理篇)
小喵的唠叨话:最近京东图书大减价,小喵手痒了就买了本<Redis设计与实现>[1]来看看.这里权当小喵看书的笔记啦.这一系列的模式,主要是先介绍Redis的实现原理(可能很大一部分会直接照 ...
- Linq查询基本操作
摘要:本文介绍Linq查询基本操作(查询关键字) - from 子句 - where 子句 - select子句 - group 子句 - into 子句 - orderby 子句 - join 子句 ...
- C++ map的基本操作和使用
原文地址:http://blog.sina.com.cn/s/blog_61533c9b0100fa7w.html Map是c++的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可 ...
- python之最强王者（10）———文件(File)、输入输出的基本操作
1. Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 2.打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式. ...
随机推荐
- （字符串处理）Fang Fang -- hdu -- 5455 （2015 ACM/ICPC Asia Regional Shenyang Online）
链接: http://acm.hdu.edu.cn/showproblem.php?pid=5455 Fang Fang Time Limit: 1500/1000 MS (Java/Others) ...
- 20155320 2016-2017-2 《Java程序设计》第五周学习总结
20155320 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 错误处理 java中所有错误都会被打包为对象,可以通过try catch 代表错误的对象后做 ...
- hdu 5007
http://acm.hdu.edu.cn/showproblem.php?pid=5007 字符串处理 暴力 #include <cstdio> #include <cstdlib ...
- javascript 奇技淫巧45招
教程:http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best-practices.html 1.上线前检查和压缩代码:用 ...
- Beta版本使用说明
一.产品介绍 我们做的是一个基于安卓的手机app,通过连接图书馆的数据库,实现查询图书馆的书目信息的功能. 二.软件运行 我们只做了安卓版本,需要在安卓环境下运行. 三.软件结构 本软件主要包括客户端 ...
- 抱SQL SERVER大腿之我爱用视图(对大数据量的管理)
我们拥有一个巨大的表,两千多万条记录.也许在行家眼里,两千多万条记录顶多算条毛,不过这条毛也忒粗壮了一点:我们的数据库占用的空间已经达到5G多了.不要以为是日志文件在搞鬼,日志文件可以自动收缩的,最多 ...
- 短URL
短网址应用已经在全国各大微博上开始流行了起来.例如QQ微博的url.cn,新郎的sinaurl.cn等. 我们在QQ微博上发布网址的时候,微博会自动判别网址,并将其转换,例如:http://url.c ...
- linux新定时器：timefd及相关操作函数
timerfd是Linux为用户程序提供的一个定时器接口.这个接口基于文件描述符,通过文件描述符的可读事件进行超时通知,所以能够被用于select/poll的应用场景. 一,相关操作函数 #inclu ...
- 一个基于ASP.NET（C#）的ACCESS数据库操作类
using System; using System.Collections; using System.Collections.Specialized; using System.Data; usi ...
- C#委托总结-入门篇
1,概念:委托类型表示对具有特定参数列表和返回类型的方法的引用. 通过委托,可以将方法视为可分配给变量并可作为参数传递的实体. 委托是引用类型,可以把它看作是用来存方法的一种类型.比如说类型strin ...