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语句,你可以给它传递零个或多个用逗号隔开的表达式. ...
随机推荐
- C++ 11可变参数接口设计在模板编程中应用的一点点总结
概述 本人对模板编程的应用并非很深,若要用一句话总结我个人对模板编程的理解,我想说的是:模板编程是对类定义的弱化. 如何理解“类定义的弱化”? 一个完整的类有如下几部分组成: 类的名称: 类的成员变量 ...
- 对话框的按键处理 PreTranslateMessage、OnKeyDown和OnChar
对话框的按键处理 PreTranslateMessage.OnKeyDown和OnChar 1.MFC对话框不能响应OnKeyDown和OnChar函数(1)现象 在MFC的对话框中,映射了WM_C ...
- Java内存模型(二)
volatile型变量的特殊规则 volatile是Java虚拟机提供的最轻量级的同步机制,当一个变量被定义成volatile后,它将具备两种特性,第一是保证此变量对所有线程的可见性,这里的“可见性” ...
- Beta版本使用说明
一.产品介绍 我们做的是一个基于安卓的手机app,通过连接图书馆的数据库,实现查询图书馆的书目信息的功能. 二.软件运行 我们只做了安卓版本,需要在安卓环境下运行. 三.软件结构 本软件主要包括客户端 ...
- Python学习-27.Python中的列表（list）
列表已经用了很多次了.使用中括号包含元素. list = ['a','b','c'] 获取元素使用[]. print(list[0]) 输出a 不过值得注意的是,[]只能是0到元素个数-1吗?在Pyt ...
- redis开机自启动脚本(linux)
目前redis放在home下的文件夹中,写一个脚本,待系统启动的过程中,去启动该脚本. 脚本:redis.sh #!/bin/sh /home/juepei/Downloads/redis-3.0.0 ...
- WebRequest请求被中止: 未能创建 SSL/TLS 安全通道
使用System.Net.WebRequest.Create(url)抓取某网站信息时 ,出现“未能创建 SSL/TLS 安全通道”此条异常信息 解决方案 引用:using System.Net; 在 ...
- c# 将一个长耗时任务改成task
public Task<ObservableCollection<WaterFallDataSource2>> InitalrenderSourceandBrush2(int ...
- 面试题-选择题Python
一. 6.下列表达式中返回为True的是() A.3>2>2 false B.'abc'>'xyz' false C.0x56<56 86<56 false 0x ...
- Debug Dart at External Terminal
launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions ...