笔者早些时间看过web sql database,但是不再维护和支持,所以最近初步学习了一下indexedDB数据库,首先indexedDB(简称IDB)和web sql database有很大的差别,因为IDB不像web sql database那样用数据库语句去操作浏览器本地数据库(有过数据库基础看起来会比较容易),及关系数据库,IDB更像是NoSQL数据库,不能使用sql语句去查询,所以理解上会比web sql database要难一点:下面我主要介绍indexedDB数据库的基本操作:增删改差
首先:获取indexedDB数据库对象
1 if (!window.indexedDB) {
2 window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
3 }
然后打开数据库(如果数据库不存在当然就是创建数据库)
1 var request = indexedDB.open("data2",1);
2 var db;
第一个参数是数据库的名称,第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。
1 request.onupgradeneeded = function(event) {
2 db = event.target.result;
3 var store = db.createObjectStore("table",{keyPath: "ssn"});
4 console.log("createObjectStore success!");
5 };
6 request.onsuccess = function (event) {
7 db = event.target.result; //db = request.result;或者db = this.result;
12 }
但你增加数据库版本号时,会触发onupgradeneeded
事件,这时可能会出现成功、失败和阻止事件三种情况
onupgradeneeded
事件在第一次打开页面初始化数据库时会被调用,或在当有版本号变化时。所以,你应该在onupgradeneeded
函数里创建你的存储数据。如果没有版本号变化,而且页面之前被打开过,你会获得一个onsuccess
事件。如果有错误发生时则触发onerror
事件。如果你之前没有关闭连接,则会触发onblocked
事件。
做完上面的操作后你就可以进行增删改查的操作了:
1、添加数据:
1 document.getElementById("add").onclick = function (){
2 var obj = {
3 "ssn" : document.getElementById("ssn").value,
4 "name" : document.getElementById("name").value,
5 "email" : document.getElementById("email").value
6 };
7 //存数据 db为数据库对象,transaction为事物,objectStore为存储对象(相当于数据表),add为数据表对象的add方法,最后是add成功的回调函数
8 db.transaction(["table"], "readwrite").objectStore("table").add(obj).onsuccess = function(event) {
9 console.log("add data success!");
10 };
11 }
2、删除数据:
1 document.getElementById("del").onclick = function() {
2 //删除数据
3 db.transaction(["table"], "readwrite")
4 .objectStore("table")
5 .delete(document.getElementById("del_ssn").value)
6 .onsuccess = function(event) {
7 console.log(document.getElementById("del_ssn").value+" delete sucecess");
8 };
9 }
3、读取数据:
1 document.getElementById("get").onclick = function() {
2 //读数据 openCursor相当于是循环读取
3 db.transaction("table").objectStore("table").openCursor().onsuccess = function(event) {
4 var getString = "";
5 var cursor = event.target.result;
6 if (cursor) {
7 getString += "Name for SSN " + cursor.key + " is " + cursor.value.name;
8 console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
9 cursor.continue();
10 //alert(getString);
11 }
12 document.getElementById("get_ssn").innerHTML += getString+"<br/>";
13 }
14 }
4、修改数据:
1 document.getElementById("put").onclick = function () {
2 var obj = {
3 "ssn" : document.getElementById("putssn").value,
4 "name" : document.getElementById("putname").value,
5 "email" : document.getElementById("putemail").value
6 };
7 //修改数据
8 db.transaction(["table"], "readwrite").objectStore("table").put(obj).onsuccess = function(event) {
9 console.log("put data success!");
10 };
11 }
以下是面页的html部分:
1 <input type="text" id="ssn" name="ssn" />
2 <input type="text" id="name" name="name" />
3 <input type="text" id="email" name="email" />
4 <button id="add">增加</button>
5 <button>重置</button><br/>
6
7 <input type="text" id="putssn" name="putssn" />
8 <input type="text" id="putname" name="putname" />
9 <input type="text" id="putemail" name="putemail" />
10 <button id="put">修改</button><br/>
11
12
13 <input type="text" id="del_ssn" name="del_ssn" />
14 <button id="del">删除</button><br/>
15 <button id="get">读取</button>
16 <div id="get_ssn"></div>
初学indexedDB,有什么不对的地方望指出,后续会把比较深入的东西写出来和大家分享
整个demo文件如下:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>indexedDB</title>
5 </head>
6 <script type="text/javascript">
7 window.onload = function () {
8 if (!window.indexedDB) {
9 window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
10 }
11 var request = indexedDB.open("data",1);
12 var db;
13 request.onupgradeneeded = function(event) {
14 db = event.target.result;
15 var store = db.createObjectStore("table",{keyPath: "ssn"});
16 console.log("createObjectStore success!");
17 };
18 request.onsuccess = function (event) {
19 db = event.target.result;
20 //读取数据
21 /*db.transaction(["table"], "readwrite").objectStore("table").get("1212").onsuccess = function () {
22 console.log(this.result.name);
23 }; */
24 }
25 document.getElementById("add").onclick = function (){
26 var obj = {
27 "ssn" : document.getElementById("ssn").value,
28 "name" : document.getElementById("name").value,
29 "email" : document.getElementById("email").value
30 };
31 //存数据
32 db.transaction(["table"], "readwrite").objectStore("table").add(obj).onsuccess = function(event) {
33 console.log("add data success!");
34 };
35 }
36 document.getElementById("del").onclick = function() {
37 //删除数据
38 db.transaction(["table"], "readwrite")
39 .objectStore("table")
40 .delete(document.getElementById("del_ssn").value)
41 .onsuccess = function(event) {
42 console.log(document.getElementById("del_ssn").value+" delete sucecess");
43 };
44 }
45 document.getElementById("get").onclick = function() {
46 //读数据
47 db.transaction("table").objectStore("table").openCursor().onsuccess = function(event) {
48 var getString = "";
49 var cursor = event.target.result;
50 if (cursor) {
51 getString += "Name for SSN " + cursor.key + " is " + cursor.value.name;
52 console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
53 cursor.continue();
54 //alert(getString);
55 }
56 document.getElementById("get_ssn").innerHTML += getString+"<br/>";
57 }
58 }
59
60 document.getElementById("put").onclick = function () {
61 var obj = {
62 "ssn" : document.getElementById("putssn").value,
63 "name" : document.getElementById("putname").value,
64 "email" : document.getElementById("putemail").value
65 };
66 //修改数据
67 db.transaction(["table"], "readwrite").objectStore("table").put(obj).onsuccess = function(event) {
68 console.log("put data success!");
69 };
70 }
71 }
72 </script>
73 <body>
74 <input type="text" id="ssn" name="ssn" />
75 <input type="text" id="name" name="name" />
76 <input type="text" id="email" name="email" />
77 <button id="add">增加</button>
78 <button>重置</button><br/>
79
80 <input type="text" id="putssn" name="putssn" />
81 <input type="text" id="putname" name="putname" />
82 <input type="text" id="putemail" name="putemail" />
83 <button id="put">修改</button><br/>
84
85
86 <input type="text" id="del_ssn" name="del_ssn" />
87 <button id="del">删除</button><br/>
88 <button id="get">读取</button>
89 <div id="get_ssn"></div>
90 </body>
91 </html>
indexedDB_demo
效果如下: