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语句,你可以给它传递零个或多个用逗号隔开的表达式. ...
随机推荐
- 【翻译】使用Vuex解决Vue中的身份验证
翻译原文链接:https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex 我的翻译小站:https://www.zcfy ...
- 75. Sort Colors(颜色排序) from LeetCode
75. Sort Colors 给定一个具有红色,白色或蓝色的n个对象的数组,将它们就地 排序,使相同颜色的对象相邻,颜色顺序为红色,白色和蓝色. 这里,我们将使用整数0,1和2分别表示红色, ...
- _RecordsetPtr使用方法
_variant_t vUsername,vID,vname; //变量声明 _RecordsetPtr m_pRecordset; //记录集 CString strid; _Connect ...
- OpenGl 中的基本数据类型
OpenGl 中的基本数据类型 为了便于 OpenGL在各种平台上移植,OpenGL定义了自己的数据类型. 如果你愿意也可用这些数据类型对应的标准C的数据类型来替代.如OpenGL也定义 GLvoid ...
- colorbox在android上由于高度太高无法scroll问题
首先看问题截图: 我们可以看到弹出的colorbox页面的高度已经到了下面,你根本看不到"mistake cross"<=>"X". 我测试了iph ...
- 【转】WPF中PasswordBox控件的Password属性的数据绑定
英文原文:http://www.wpftutorial.net/PasswordBox.html 中文原文:http://blog.csdn.net/oyi319/article/details/65 ...
- Sublime Text 3 格式化HTML CSS JS 代码
一,首先通过ctrl+shift+p 要等一会就会出现插件安装界面 二,在插件安装输入框,输入:HTML-CSS-JS Prettify 并安装该插件 三,如果没有装nodejs, 下载nodejs ...
- DataTable根据字段去重
DataTable根据字段去重 最近需要对datatable根据字段去重,在网上搜了很多,找到了一个方法,代码如下 public static DataTable DistinctSomeColumn ...
- 栈的实现——c++
栈(stack),是一种线性存储结构,它有以下几个特点: (01) 栈中数据是按照"后进先出(LIFO, Last In First Out)"方式进出栈的. (02) 向栈中添加 ...
- WIKI常用的表格设计模板
域名服务器管理表格 数据库管理表格 软件路径说明表格 开发测试环境虚拟机表格