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语句,你可以给它传递零个或多个用逗号隔开的表达式. ...
随机推荐
- xib中快捷键
Alt + 点击视图,实现快速复制 点击视图, + Alt 将鼠标放在另一个视图上,可以显示两视图x 和y方向的距离, 按方向键上下,调节两视图的距离 Command + Shift + G 前往 ...
- C#-流、存储
流输入输出 VS提供的类库,可方便数据的转移操作,一部分是文件和目录方面 file类 用静态方法, fileinfo类 用实例方法 dictionary类 用静态方法 dictionary ...
- （并查集 建立关系）Parity game -- POJ -1733
链接: http://poj.org/problem?id=1733 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82830#probl ...
- Codeforces758B Blown Garland 2017-01-20 10:19 87人阅读 评论(0) 收藏
B. Blown Garland time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- Sql Server 2008 压缩数据库日志文件
第一步:将数据库设置为简单模式 选中数据库点右键->属性: 第二步:收缩数日志文件 1, 2, 第三步:将恢复模式改回为完整模式 如果你觉得用UI界面麻烦,那你就用SQL语句吧 ...
- Mina Session
Chapter 4 - Session The Session is at the heart of MINA : every time a client connects to the server ...
- TSQL--删除登陆相关的用户
无二话,上代码 --删除登陆相关的用户 --遍历所有数据库,查找到与登录名相关联的的用户,生成删除脚本 ) SET @loginName='DBA'; DECLARE @comm NVARCHAR(M ...
- Alwayson--问题总结一
1. Alwayson 是否依赖于域环境? 答: 是, alwayson依赖于故障转移群集(只有在故障转移群集中的SQL Server 才能启动高可行性组功能),而故障转移群集愈依赖于域环境. 2. ...
- 用MVC5+EF6+WebApi 做一个考试功能(五) 前端主题
内容概述 前面絮絮叨叨没正事,到现在为止也没有开始写代码,不过在考虑下貌似这一节还是开始不了. B/S架构开发有一个特点,就是用浏览器打开,不同的用户群体可能有不同的风格,不论是管理平台还是普通的网站 ...
- python 发qq邮件
import smtplibfrom email.mime.text import MIMETextmsg_from = '979477675@qq.com' # 发送方邮箱passwd = 'irg ...