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语句,你可以给它传递零个或多个用逗号隔开的表达式. ...
随机推荐
- HDU 3455 Leap Frog 2016-09-12 16:34 43人阅读 评论(0) 收藏
Leap Frog Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- Team Foundation Server (TFS)集成Flyway，实现数据库的版本管理
1 概述 在系统开发过程中,我们对软件源代码的版本管理,已经有了比较成熟的解决方案.通过使用TFVC或GIT等源代码管理工具,可以非常方便的对软件代码实现回退.比较.分支合并等版本操作.对于软件依赖的 ...
- RESTful Android
RESTful Android API 定义 约定 回复中默认包含标头: Content-Type: application/json;charset=UTF-8 异步操作以(*)号标记 大多数异步操 ...
- Miniprofiler在swagger、vue、angular中的使用
本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...
- .NET Core 玩一玩 Ocelot API网关
.net 这几年国内确实不好过. 很多都选择转行.不过.net Core跨平台 开源之后 .社区的生态在慢慢建立.往好的趋势发展. 对于坚守在.NET战线的开发者来说 是个挺不错的消息. 特别是微软 ...
- From Alpha to Gamma (II)
这篇文章被拖延得这么久是因为我没有找到合适的引言 -- XXX 这一篇接着讲Gamma.近几年基于物理的渲染(Physically Based Shading, 后文简称PBS)开始在游戏业界受到关注 ...
- 『原创』手把手教你搭建一个实用的油耗App（一）
前言: 入行快10年,有点积蓄,三年前买了代步车.于是乎,汽车油耗开销就成了每个月都必须关注的问题.三年来,用过了无数油耗记录软件,比如最知名的“小熊油耗”,从第一次用,一直到最新一版,感觉越来越“臃 ...
- 无废话网页重构系列——（3）Web重构前的分析
本篇讲重构前的分析.从“工作状态.工作环境和工作角色”和具体重构工作两方面分析. 凡是经过考验的朋友,就应该把他们紧紧地团结在你的周围 比较理想的工作状态:制定了各种设计和开发规范,各团队之间邮件.团 ...
- Android学习之Fragment解析
1.定义 Fragment中文解释是碎片的意思,主要用在大屏幕设备上,例如平板电脑上,支持更加动态和灵活的UI设计.Fragment在你的应用中相当于是一个模块化和可重用的组件,因为Fragm ...
- flume在windows环境下的使用
Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理, ...