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 ...
随机推荐
- homework-06-C++11
http://blog.csdn.net/lancelet/article/details/7220558 http://www.csdn.net/article/2012-05-15/2805585 ...
- WinJS.Binding.List与kendo.data.ObservableArray
avalon0.8一个最大目标是实现对数组的深层监控,可是面临的困难重重,至今还没有什么起色.于是看一下其他两个MVVM框架的做法(knockout, emberjs, angular都不能监听家庭数 ...
- Com进程通信(Delphi2007)
相关资料: 1.http://my.oschina.net/u/582827/blog/2847662.http://www.cnblogs.com/findumars/p/5277561.html3 ...
- HDU 5791 Two （DP）
Two 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5791 Description Alice gets two sequences A and ...
- [iOS微博项目 - 1.3] - 内容对齐 TextAlignment & VerticalAlignment & HorizontalAlignment & contentMode
四个容易混淆的属性:1. textAligment : 文字的水平方向的对齐方式1> 取值NSTextAlignmentLeft = 0, // 左对齐NSTextAlignme ...
- HDU 3661 Assignments (水题，贪心)
题意:n个工人,有n件工作a,n件工作b,每个工人干一件a和一件b,a[i] ,b[i]代表工作时间,如果a[i]+b[j]>t,则老板要额外付钱a[i]+b[j]-t;现在要求老板付钱最少: ...
- IOS开发--数据持久化篇文件存储(二)
前言:个人觉得开发人员最大的悲哀莫过于懂得使用却不明白其中的原理.在代码之前我觉得还是有必要简单阐述下相关的一些知识点. 因为文章或深或浅总有适合的人群.若有朋友发现了其中不正确的观点还望多多指出,不 ...
- 用Rufus来制作Windows10的U盘安装盘
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Rufus来制作Windows10的U盘安装盘.
- Oracle数据库的版本变迁功能对比
Oracle数据库自发布至今,也经历了一个从不稳定到稳定,从功能简单至强大的过程.从第二版开始,Oracle的每一次版本变迁,都具有里程碑意义. 1979年的夏季,RSI(Oracle公司的前身,Re ...
- 判断sqlserver临时表等临时资源是否存在
if exists(select * from tempdb..sysobjects where id=object_id('tempdb..#TEMP')) drop table #TEMP