HTML5 indexedDB数据库的入门学习（一）
笔者早些时间看过web sql database，但是不再维护和支持，所以最近初步学习了一下indexedDB数据库，首先indexedDB（简称IDB）和web sql database有很大的差别，因为IDB不像web sql database那样用数据库语句去操作浏览器本地数据库（有过数据库基础看起来会比较容易），及关系数据库，IDB更像是NoSQL数据库，不能使用sql语句去查询，所以理解上会比web sql database要难一点：下面我主要介绍indexedDB数据库的基本操作：增删改差
首先：获取indexedDB数据库对象
if (!window.indexedDB) {
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
}
然后打开数据库（如果数据库不存在当然就是创建数据库）
var request = indexedDB.open("data2",1);
var db;
第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。
request.onupgradeneeded = function(event) {
db = event.target.result;
var store = db.createObjectStore("table",{keyPath: "ssn"});
console.log("createObjectStore success!");
};
request.onsuccess = function (event) {
db = event.target.result; //db = request.result;或者db = this.result;
}
但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况
onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。
做完上面的操作后你就可以进行增删改查的操作了：
1、添加数据：
document.getElementById("add").onclick = function (){
var obj = {
"ssn" : document.getElementById("ssn").value,
"name" : document.getElementById("name").value,
"email" : document.getElementById("email").value
};
//存数据 db为数据库对象，transaction为事物，objectStore为存储对象（相当于数据表），add为数据表对象的add方法，最后是add成功的回调函数
db.transaction(["table"], "readwrite").objectStore("table").add(obj).onsuccess = function(event) {
console.log("add data success!");
};
}
2、删除数据：
document.getElementById("del").onclick = function() {
//删除数据
db.transaction(["table"], "readwrite")
.objectStore("table")
.delete(document.getElementById("del_ssn").value)
.onsuccess = function(event) {
console.log(document.getElementById("del_ssn").value+" delete sucecess");
};
}
3、读取数据:
document.getElementById("get").onclick = function() {
//读数据 openCursor相当于是循环读取
db.transaction("table").objectStore("table").openCursor().onsuccess = function(event) {
var getString = "";
var cursor = event.target.result;
if (cursor) {
getString += "Name for SSN " + cursor.key + " is " + cursor.value.name;
console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
cursor.continue();
//alert(getString);
}
document.getElementById("get_ssn").innerHTML += getString+"<br/>";
}
}
4、修改数据：
document.getElementById("put").onclick = function () {
var obj = {
"ssn" : document.getElementById("putssn").value,
"name" : document.getElementById("putname").value,
"email" : document.getElementById("putemail").value
};
//修改数据
db.transaction(["table"], "readwrite").objectStore("table").put(obj).onsuccess = function(event) {
console.log("put data success!");
};
}
以下是面页的html部分：
<input type="text" id="ssn" name="ssn" />
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<button id="add">增加</button>
<button>重置</button><br/> <input type="text" id="putssn" name="putssn" />
<input type="text" id="putname" name="putname" />
<input type="text" id="putemail" name="putemail" />
<button id="put">修改</button><br/> <input type="text" id="del_ssn" name="del_ssn" />
<button id="del">删除</button><br/>
<button id="get">读取</button>
<div id="get_ssn"></div>
初学indexedDB，有什么不对的地方望指出,后续会把比较深入的东西写出来和大家分享
整个demo文件如下：
<!DOCTYPE html>
<html>
<head>
<title>indexedDB</title>
</head>
<script type="text/javascript">
window.onload = function () {
if (!window.indexedDB) {
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
}
var request = indexedDB.open("data",1);
var db;
request.onupgradeneeded = function(event) {
db = event.target.result;
var store = db.createObjectStore("table",{keyPath: "ssn"});
console.log("createObjectStore success!");
};
request.onsuccess = function (event) {
db = event.target.result;
//读取数据
/*db.transaction(["table"], "readwrite").objectStore("table").get("1212").onsuccess = function () {
console.log(this.result.name);
}; */
}
document.getElementById("add").onclick = function (){
var obj = {
"ssn" : document.getElementById("ssn").value,
"name" : document.getElementById("name").value,
"email" : document.getElementById("email").value
};
//存数据
db.transaction(["table"], "readwrite").objectStore("table").add(obj).onsuccess = function(event) {
console.log("add data success!");
};
}
document.getElementById("del").onclick = function() {
//删除数据
db.transaction(["table"], "readwrite")
.objectStore("table")
.delete(document.getElementById("del_ssn").value)
.onsuccess = function(event) {
console.log(document.getElementById("del_ssn").value+" delete sucecess");
};
}
document.getElementById("get").onclick = function() {
//读数据
db.transaction("table").objectStore("table").openCursor().onsuccess = function(event) {
var getString = "";
var cursor = event.target.result;
if (cursor) {
getString += "Name for SSN " + cursor.key + " is " + cursor.value.name;
console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
cursor.continue();
//alert(getString);
}
document.getElementById("get_ssn").innerHTML += getString+"<br/>";
}
} document.getElementById("put").onclick = function () {
var obj = {
"ssn" : document.getElementById("putssn").value,
"name" : document.getElementById("putname").value,
"email" : document.getElementById("putemail").value
};
//修改数据
db.transaction(["table"], "readwrite").objectStore("table").put(obj).onsuccess = function(event) {
console.log("put data success!");
};
}
}
</script>
<body>
<input type="text" id="ssn" name="ssn" />
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<button id="add">增加</button>
<button>重置</button><br/> <input type="text" id="putssn" name="putssn" />
<input type="text" id="putname" name="putname" />
<input type="text" id="putemail" name="putemail" />
<button id="put">修改</button><br/> <input type="text" id="del_ssn" name="del_ssn" />
<button id="del">删除</button><br/>
<button id="get">读取</button>
<div id="get_ssn"></div>
</body>
</html>
indexedDB_demo
效果如下：
HTML5 indexedDB数据库的入门学习（一）的更多相关文章
- HTML5 indexedDB数据库的入门学习（二）
上一篇关于indexedDB的学习笔记主要写了indexedDB数据库的基本操作—增删改查:但是为什么我们要用indexedDB呢?为什么indexedDB受到了开发者们的青睐呢?最主要的就是inde ...
- HTML5 indexedDb 数据库
indexedDb 数据库 上一节中,我们知道了,HMTL5中内置了两种本地数据库,一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite,另一种是是被称为indexedDB 的数据 ...
- HTML5 进阶系列：indexedDB 数据库
前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...
- 【数据库】9.0 MySQL入门学习（九）——获得数据库和表的信息、日期计算、查询、选择特殊列
1.0 SELECT语句用来从数据表中检索信息. SELECT what_to_select FROM which_table WHERE conditions_to_satisfy; what_to ...
- 【数据库】7.0 MySQL入门学习（七）——MySQL基本指令：帮助、清除输入、查询等
1.0 help == ? 帮助指令,查询某个指令的解释.用法.说明等.详情参考博文: [数据库]6.0 MySQL入门学习(六)——MySQL启动与停止.官方手册.文档查询 https://www. ...
- 【数据库】4.0 MySQL入门学习（四）——linux系统环境下MySQL安装
1.0 我的操作系统是CentOS Linux release 7.6.1810 (Core) 系统详细信息如下: Linux version 3.10.0-957.1.3.el7.x86_64 ( ...
- 【数据库】3.0 MySQL入门学习（三）——Windows系统环境下MySQL安装
1.0 我的操作系统是window10 专业版 64位.,不过至少windows7以上系统都是一样的. 关于MySQL如何下载,请参考博文: [数据库]2.0 如何获得MySQL以及MySQL安装 h ...
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- opengl入门学习
OpenGL入门学习 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640 ...
随机推荐
- MySQL分支Percona, cmake编译安装
Percona是在MySQL基础上改进的,在功能和性能上有着很显著的提升.该版本提升了在高负载情况下的InnoDB的性能,为DBA提供一些非常有用的性能诊断工具:另外有更多的参数和命令来控制服务器行为 ...
- 转载 从Http到Https
转载自 http://www.cnblogs.com/silin6/p/5928503.html HTTP 当你在浏览器输入一个网址 (例如 http://tasaid.com)的时候,浏览器发起一个 ...
- 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式（三）
转载 http://blog.csdn.net/cutesource/article/details/6192163 最后我们再看看NIO方面最著名的框架Mina,抛开Mina有关session和处理 ...
- 转载“启动\关闭Oracle数据库的多种方法”--来自百度#Oracle
启动\关闭Oracle数据库的多种方法 启动和关闭oracle有很多种方法. 这里只给出3种方法: l Sql*plus l OEM控制台 l Wind ...
- time_t转换为DateTime
最近解析文华财经的日线数据. 取得的第一个字段是日期,为time_t格式(long)的. 因为是用C#来写解析程序,所以要转换为DateTime的. time_t是世界时间,要转换为本地时间,所以要加 ...
- jQuery 源码解析一：jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- php 常用设计模式详解
1.单例模式 构造函数必须为private 一个保存类实例静态成员变量 拥有一个访问这个实例的公共静态方法(常用getInstance()方法进行实例化单例类,通过instanceof操作符可以检测到 ...
- Cocos2d-x——pthread的使用注意事项
1:多线程所调用的成员方法定义为static. 2:互斥锁(pthread_mutex_t)定义在cpp文件的开头,并且也定义为static. 3:pthread_mutex_init方法尽量在最早的 ...
- 【转】安装Intel HAXM为Android 模拟器加速，30秒内启动完成
http://www.cnblogs.com/Li-Cheng/p/4351966.html http://www.cnblogs.com/csulennon/p/4178404.html https ...
- struts2属性Struts2中属性接收参数中文问题和简单数据验证
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 一:如果表单提交数据中有中文时,尽量应用post方式. 需要在Struts. ...