html5本地存储（三）--- 本地数据库 indexedDB

html5内置了2种本地数据库，一是被称为“SQLLite”,可以通过SQL语言来访问文件型SQL数据库。二是被称为“indexedDB” 的NoSQL类型的数据库，本篇主要讲indexedDB数据库。

　该数据库是一种存储在客户端本地的NoSQL数据库，目前chrome11以上、Firefox4以上、Opera18以上、Safar8以上及IE10以上的浏览器提供支持

一、连接数据库

使用indexedDB.open方法连接数据库

var dbName = 'indexedDBTest';      //数据库名
var dbVersion = 20170603;            //版本号			
/*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
var dbConnect = indexedDB.open(dbName, dbVersion);

open方法返回一个IDBOpenDBRequest对象，代表数据库连接的请求对象；该方法接收2个参数

第一个参数：字符串，代表数据库名

第二个参数：无符号长整形数值，代表版本号

示例代码如下

 1 <script>
 2     //在浏览器中都能运行的统一定义
 3     //首先需要对indexedDB数据库，及该数据库所使用的事务、IDBKeyRange对象与游标对象进行预定义
 4     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 5     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 6     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 7     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 8 
 9     function connectDatabase() {
10     //数据库名
11     var dbName = 'indexedDBTest'; 
12     //版本号
13     var dbVersion = 20170603; 
14     var idb;
15     /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
16     var dbConnect = indexedDB.open(dbName, dbVersion);
17     //连接成功时所执行的事件处理函数
18     dbConnect.onsuccess = function(e) { 
19         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
20         idb = e.target.result;
21         alert('数据库连接成功');
22     };
23     //连接失败是要处理得事件
24     dbConnect.onerror = function() {
25         alert('数据库连接失败');
26     };
27     }
28 </script>
29 
30 <input type="button" value="连接数据库" onclick="connectDatabase();" />
31

View Code

二、数据库的版本更新

　　成功连接数据库后，还应该创建相当于关系型数据库中的数据表的对象仓库（object store）与用于检索数据的索引（index）。

　　在使用indexexDB数据库时，所有对于数据的操作都在一个事务内部执行。

　　事务分为3种：只读事务、读写事务、与版本更新事务，这里主要展示版本更新事务

　使用onupgradeneeded事件来监听数据库连接的请求对象

示例代码如下

 1 <head>
 2     <meta charset="UTF-8"/>
 3     <title>更新数据库的版本</title>
 4     <script>
 5         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10         function VersionUpdate() {
11         var dbName = 'indexedDBTest'; //数据库名
12         var dbVersion = 20170304; //版本号
13         var idb;
14         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15         var dbConnect = indexedDB.open(dbName, dbVersion);
16             dbConnect.onsuccess = function(e) { //连接成功
17                 //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
18             idb = e.target.result;
19             alert('数据库连接成功');
20              };
21         dbConnect.onerror = function() {
22             alert('数据库连接失败');
23         };
24                 
25         dbConnect.onupgradeneeded = function(e) {
26             //数据库版本更新
27             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
28             idb = e.target.result;
29             /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/
30             var tx = e.target.transaction;
31             //更新前的版本号
32             var oldVersion = e.oldVersion; 
33             //更新前的版本号
34             var newVersion = e.newVersion; 
35             alert('数据库版本更新成功,旧的版本号为' + oldVersion + ',新的版本号为' + newVersion);
36             /*
37              * 此处可执行创建对象仓库等处理
38              */
39         };
40         }
41     </script>
42 </head>
43 
44 <body>
45     <input type="button" value="数据库版本更新" onclick="VersionUpdate();" />
46 </body>

View Code

三、创建对象仓库

　　在indexexDb中，不能重复创建同名的对象仓库，否则会报错

　　在数据库的版本更新事务中，通过createObjectStore来创建对象，

var name = 'Users';
var optionalParameters = {
    keyPath: 'userId',
    autoIncrement: false
};
var store = idb.createObjectStore(name, optionalParameters);

该方法返回一个IDBObjectStore对象，该对象代表被创建成功的对象仓库。该对象接收2个参数，

第一个参数：字符串，代表对象仓库名；

第二个参数：可选参数，参数值为一个js对象，该对象的keyPath属性值用于指定对象仓库中该记录每一条记录使用哪个属性值来作为该记录的主键值。相关方法说明

1 keyPath：值用于指定每一条记录使用哪个属性值作为该记录的主键值，默认值为null。对象仓库中的每一条记录均为具有一个或者多个属性值的一个对象
2 
3 autoIncrement：布尔值。当值为true的时候，将主键指定为自增主键。当值为false的时候，则必须在添加数据记录时显示地指定主键值

View Code

示例代码如下

 1 <head>
 2     <meta charset="UTF-8"/>
 3     <title>创建对象仓库</title>
 4     <script>
 5     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10     function CreateObjectStore() {
11         var dbName = 'indexedDBTest'; //数据库名
12         var dbVersion = 20150305; //版本号
13         var idb;
14         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15         var dbConnect = indexedDB.open(dbName, dbVersion);
16         dbConnect.onsuccess = function(e) { //连接成功
17         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
18         idb = e.target.result;
19         alert('数据库连接成功');
20         };
21         dbConnect.onerror = function() {
22         alert('数据库连接失败');
23         };
24         dbConnect.onupgradeneeded = function(e) {
25         //数据库版本更新
26         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
27         idb = e.target.result;
28         /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/
29         var tx = e.target.transaction;
30         var name = 'Users';
31         var optionalParameters = {
32             keyPath: 'userId',
33             autoIncrement: false
34         };
35         var store = idb.createObjectStore(name, optionalParameters);
36         alert('对象仓库创建成功');
37         /*
38          * 索引创建部分略，稍后详述
39          */
40         };
41     }
42     </script>
43 </head>
44 
45 <body>
46     <input type="button" value="创建对象仓库" onclick="CreateObjectStore();" />
47 </body>

View Code

四、创建索引

　　在关系型数据库中，可以针对非索引字段进行检索。而在indexexDB中，只能针对被设为索引的属性值进行检索，不能针对没有被设为索引的属性值进行检索

　　在数据库的版本更新事务中，在对象仓库创建成功后调用对象仓库的createIndex方法创建索引

var name = 'userNameIndex';
var keyPath = 'userName';
var optionalParameters = {
    unique: false,
    multiEntry: false
};

var idx = store.createIndex(name, keyPath, optionalParameters)

　　该方法接收3个参数，

第一个参数：字符串，代表索引名；

第二个参数：数据库仓库中记录对象的哪个属性来创建索引（索引名与属性名可以相同的）；

第三个参数：可选参数，参数值为js对象

示例代码如下

 1 <head>
 2     <meta charset="UTF-8" />
 3     <title>创建索引</title>
 4     <script>
 5     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10     function CreateIndex() {
11         var dbName = 'indexedDBTest'; //数据库名
12         var dbVersion = 20150306; //版本号
13         var idb;
14         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15         var dbConnect = indexedDB.open(dbName, dbVersion);
16         dbConnect.onsuccess = function(e) { //连接成功
17             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
18             idb = e.target.result;
19             alert('数据库连接成功');
20         };
21         dbConnect.onerror = function() {
22             alert('数据库连接失败');
23         };
24         dbConnect.onupgradeneeded = function(e) {
25             //数据库版本更新
26             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
27                     idb = e.target.result;
28             /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/
29             var tx = e.target.transaction;
30             var name = 'newUsers';
31             var optionalParameters = {
32                 keyPath: 'userId',
33                 autoIncrement: false
34             };
35             var store = idb.createObjectStore(name, optionalParameters);
36             alert('对象仓库创建成功');
37             var name = 'userNameIndex';
38             var keyPath = 'userName';
39             var optionalParameters = {
40                 unique: false,
41                 multiEntry: false
42             };
43 
44             var idx = store.createIndex(name, keyPath,optionalParameters);
45             alert('索引创建成功');
46         };
47     }
48 </script>
49 </head>
50 
51 <body>
52     <input type="button" value="创建索引" onclick="CreateIndex();" />
53 </body>
54

View Code

五、使用事务

　　数据库链接后，可以使用如下方法开启只读事务与读写事务

　　在indexedDB中，使用某个已建立连接的的数据库对象的transaction方法开启事务

 1 //事务名称1
 2 var storeNames = ['Users'];
 3 //只读事务
 4 var mode = "readonly";
 5 //读写事务
 6 //var mode = "readwrite";
 7         
 8 //idb为某个已连接数据库，开启事务
 9 var tx  = idb.transaction(storeNames , mode)
10 
11 //事务结束时所要执行的处理
12 tx.oncomplete = function(e){
13                 
14 }
15 //事务中止时所要执行的处理
16 tx.onabort = function(e){
17                 
18 }
19 /*
20  事务中的处理内容
21  * */
22             
23 //中止事务
24 tx.abort()

View Code

该方法有2个参数，

第一个参数：可以为由一些对象仓库名组成的一个字符串数组，用于定义事务的作用范围

第二个参数：为可选参数，用于定义事务的读写模式

6、保存数据

　　为了保存数据，首先连接某个indexedDB数据库，并且连接后使用该数据库的transaction方法开启一个读写事务，然后获取该事务对象，使用该对象仓库的put方法进行保存数据

示例代码

 1 <head>
 2     <title>向indexedDB数据库的对象仓库中保存数据</title>
 3     <script>
 4         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 5         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 6         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 7         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 8 
 9         function SaveData() {
10             var dbName = 'indexedDBTest'; //数据库名
11             var dbVersion = 20150306; //版本号
12             var idb;
13             /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
14             var dbConnect = indexedDB.open(dbName, dbVersion);
15             dbConnect.onsuccess = function(e) { //连接成功   
16                 idb = e.target.result; //引用IDBDatabase对象 
17                 var tx = idb.transaction(['Users'], "readwrite"); //开启事务
18                 var store = tx.objectStore('Users');
19                 console.log(store); //-> {IDBObjectStore}
20                 var value = {
21                     userId: 1,
22                     userName: '张三',
23                     address: '住址1'
24                 };
25                 //保存数据
26                 var req = store.put(value);
27                 req.onsuccess = function(e) {
28                     alert("数据保存成功");
29                 };
30                 req.onerror = function(e) {
31                     alert("数据保存失败");
32                 };
33             };
34             dbConnect.onerror = function() {
35                 alert('数据库连接失败');
36             };
37         }
38     </script>
39 </head>
40 <body>
41     <input type="button" value="保存数据" onclick="SaveData();" />
42 </body>

View Code

7、获取数据

　　可以使用对象仓库的get方法从对象仓库中获取一条数据

var req = store.get(1)

示例源码

 1 <head>
 2     <title>从indexedDB数据库的对象仓库中获取数据</title>
 3     <meta charset="UTF-8"/>
 4     <script>
 5         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10         function GetData() {
11             var dbName = 'indexedDBTest'; //数据库名
12             var dbVersion = 20150306; //版本号
13             var idb;
14             /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15             var dbConnect = indexedDB.open(dbName, dbVersion);
16             dbConnect.onsuccess = function(e) { //连接成功   
17                 idb = e.target.result; //引用IDBDatabase对象 
18                 var tx = idb.transaction(['Users'], "readonly");
19                 var store = tx.objectStore('Users');
20 
21                 var req = store.get(1);
22                 req.onsuccess = function() {
23                     if(this.result == undefined) {
24                         alert("没有符合条件的数据");
25                     } else {
26                         alert("获取数据成功,用户名为" + this.result.userName);
27                     }
28                 }
29                 req.onerror = function() {
30                     alert("获取数据失败");
31                 }
32             };
33             dbConnect.onerror = function() {
34                 alert('数据库连接失败');
35             };
36         }
37     </script>
38 </head>
39 
40 <body>
41     <input type="button" value="获取数据" onclick="GetData();" />
42 </body>

View Code

8、根据主键值检索数据

　　get方法只能获取到一条数据，要获取一批数据的时候，就需要使用indexedDB中的游标

　　通过对象仓库的openCursor方法创建并打开一个游标

var range = IDBKeyRange.bound(1,4);
var direction = "next";
var req = store.openCursor(range,direction);

该方法返回一个IDBRequest对象，代表一个向数据库发出检索数据的请求。该方法有两个参数

第一个参数：IDBKeyRange对象，对象的创建方法有bound(),only(),lowerBound(),upperBound(); 对应4个方法的详解如下

 1 bound方法使用示例
 2 var range = IDBKeyRange.bound(lower,upper,lowerOpen,upperOpen);
 3 
 4 该方法返回一批数据，由主键值组成的IDBKeyRange集合对象。该方法有4个参数：
 5 第一个参数：整数值，代表IDBKeyRange集合中的最小主键值
 6 第二个参数：整数值，代表IDBKeyRange集合中的最大主键值
 7 第三个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数中指定的最小主键值；当值为true时，代表该集合对象中排除最小主键值
 8 第四个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第二个参数中指定的最大主键值；当值为true时，代表该集合对象中排除最大主键值
 9 
10  
11 only方法使用示例
12 var range = IDBKeyRange.only(value);
13 
14 该方法返回一条数据，该方法有一个参数，整数值，代表该数据的主键值
15 
16  
17 
18 lowerBound方法使用示例
19 var range = IDBKeyRange.lowerBound(lower,lowerOpen);
20 
21 该方法返回一批数据。返回的所有数据的主键值均大于等于第一个参数。该方法有两个参数
22 第一个参数：整数值，代表该集合中的最小主键值
23 第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最小主键值；当值为true时，代表该集合对象中排除最小主键值
24 
25  
26 upperBound方法使用示例
27 var range = IDBKeyRange.lowerBound(upper,upperOpen);
28 
29 该方法返回一批数据，返回的所有数据的主键值均小于等于第一个参数。该方法有两个参数
30 第一个参数：整数值，代表该集合中的最小主键值
31 第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最大主键值；当值为true时，代表该集合对象中排除最大主键值

View Code

第二个参数：用于指定游标的读取方向，参数值有如下定义

next：数据按主键值升序排列，主键值相等的数据均被读取到游标中

nextunique：数据按主键值升序排列，主键值相等的数据只读取第一条数据

prev：数据按主键值降序排列，主键值相等的数据均被读取到游标中

prevunique:数据按主键值降序排列，主键值相等的数据只读取第一条数据

示例代码

 1 <head>
 2 <title>根据数据记录的主键值检索数据</title>
 3 <meta charset="UTF-8" />
 4 <script>
 5     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9     var dbName = 'indexedDBTest'; //数据库名
10     var dbVersion = 20150306; //版本号
11     var idb;
12 
13     function window_onload() {
14         document.getElementById("btnSaveData").disabled = true;
15         document.getElementById("btnSearchData").disabled = true;
16     }
17 
18     function ConnectDataBase() {
19         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
20         var dbConnect = indexedDB.open(dbName, dbVersion);
21         dbConnect.onsuccess = function(e) { //连接成功   
22             idb = e.target.result; //引用IDBDatabase对象 
23             alert('数据库连接成功');
24             document.getElementById("btnSaveData").disabled = false;
25         };
26         dbConnect.onerror = function() {
27             alert('数据库连接失败');
28         };
29     }
30 
31     function SaveData() {
32         var tx = idb.transaction(['Users'], "readwrite"); //开启事务
33         tx.oncomplete = function() {
34             alert('保存数据成功');
35             document.getElementById("btnSearchData").disabled = false;
36         }
37         tx.onabort = function() {
38             alert('保存数据失败');
39         }
40         var store = tx.objectStore('Users');
41         var value = {
42             userId: 1,
43             userName: '张三',
44             address: '住址1'
45         };
46         store.put(value);
47         var value = {
48             userId: 2,
49             userName: '李四',
50             address: '住址2'
51         };
52         store.put(value);
53         value = {
54             userId: 3,
55             userName: '王五',
56             address: '住址3'
57         };
58         store.put(value);
59              value = {
60             userId: 4,
61             userName: '赵六',
62             address: '住址4'
63         };
64         store.put(value);
65     }
66 
67     function SearchData() {
68         var tx = idb.transaction(['Users'], "readonly");
69         var store = tx.objectStore('Users');
70 
71         var range = IDBKeyRange.bound(1, 4);
72         var direction = "next";
73 
74         var req = store.openCursor(range, direction);
75 
76         req.onsuccess = function() {
77             var cursor = this.result;
78             if(cursor) {
79                   alert('检索到一条数据，用户名为' + cursor.value.userName);
80                 cursor.continue(); //继续检索
81             } else {
82                 alert('检索结束');
83             }
84         }
85         req.onerror = function() {
86             alert('检索数据失败');
87         }
88     }
89 </script>
90 </head>
91 
92 <body onload="window_onload()">
93     <input id="btnConnectDataBase" type="button" value="连接数据库" onclick="ConnectDataBase();" />
94     <input id="btnSaveData" type="button" value="保存数据" onclick="SaveData();" />
95     <input id="btnSearchData" type="button" value="检索数据" onclick="SearchData();" />
96 </body>

View Code

9、根据索引属性值检索数据

使用openCursor方法进行检索，使用方式与openCursor方法相相似

10统计对象仓库中的数据数量

使用count方法

11、综合实例：使用indexedDB API制作web留言本

代码示例

  1 <script type="text/javascript">
  2 window.indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB ||window.msIndexedDB;
  3 window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
  4 window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||window.msIDBKeyRange;
  5 window.IDBCursor = window.IDBCursor || window.webkitIDBCursor ||window.msIDBCursor;
  6 
  7 var dbName = 'MyData'; //数据库名
  8 var dbVersion = 20150311; //版本号
  9 var idb, datatable;
 10 
 11 function init() {
 12     var dbConnect = indexedDB.open(dbName, dbVersion); //连接数据库
 13     dbConnect.onsuccess = function(e) { //连接成功    
 14         idb = e.target.result; //获取数据库
 15         datatable = document.getElementById("datatable");
 16     };
 17     dbConnect.onerror = function() {
 18         alert('数据库连接失败');
 19     };
 20     dbConnect.onupgradeneeded = function(e) {
 21         idb = e.target.result;
 22         if(!idb.objectStoreNames.contains('MsgData')) {
 23             var tx = e.target.transaction;
 24             tx.onabort = function(e) {
 25                 alert('对象仓库创建失败');
 26             };
 27             var name = 'MsgData';
 28             var optionalParameters = {
 29                 keyPath: 'id',
 30                 autoIncrement: true
 31             };
 32             var store = idb.createObjectStore(name, optionalParameters);
 33             alert('对象仓库创建成功');
 34         }
 35     };
 36 }
 37 
 38 function removeAllData() {
 39     for(var i = datatable.childNodes.length - 1; i >= 0; i--) {
 40         datatable.removeChild(datatable.childNodes[i]);
 41     }
 42     var tr = document.createElement('tr');
 43     var c = "";
 44     c += "<tr>";
 45     c += "<td>姓名</td>";
 46     c += "<td>留言</td>";
 47     c += "<td>留言时间</td>";
 48     c += "</tr>";
 49     tr.innerHTML = c
 50     datatable.appendChild(tr)
 51 }
 52 
 53 function showData(dataObject) {
 54     var tr = document.createElement('tr');
 55     var t = new Date();
 56     t.setTime(row.time);
 57             
 58     var c = "";
 59     c += "<td>"+  row.name +"</td>";
 60     c += "<td>"+  row.message +"</td>";
 61     c += "<td>"+  t.toLocaleDateString() + " " + t.toLocaleTimeString(); +"</td>";
 62             
 63     tr.innerHTML = c
 64     datatable.appendChild(tr);
 65 }
 66 
 67 function showAllData() {
 68     removeAllData();
 69     var tx = idb.transaction(['MsgData'], "readonly"); //开启事务
 70     var store = tx.objectStore('MsgData');
 71     var range = IDBKeyRange.lowerBound(1);
 72     var direction = "next";
 73     var req = store.openCursor(range, direction);
 74     req.onsuccess = function() {
 75         var cursor = this.result;
 76         if(cursor) {
 77             showData(cursor.value);
 78             cursor.continue(); //继续检索
 79         }
 80     }
 81 }
 82 
 83 function addData(name, message, time) {
 84     var tx = idb.transaction(['MsgData'], "readwrite"); //开启事务
 85     tx.oncomplete = function() {
 86         alert('保存数据成功');
 87     }
 88     tx.onabort = function() {
 89         alert('保存数据失败');
 90     }
 91     var store = tx.objectStore('MsgData');
 92     var value = {
 93         name: name,
 94         memo: message,
 95         time: time
 96     };
 97     store.put(value);
 98 }
 99 
100 function saveData() {
101     var name = document.getElementById('name').value;
102     var memo = document.getElementById('memo').value;
103     var time = new Date().getTime();
104     addData(name, memo, time);
105     showAllData();
106 }
107 </script>
108 
109 <body onload="init();">
110 <h1>使用indexedDB API制作Web留言本</h1>
111 <table>
112     <tr>
113     <td>姓名:</td>
114     <td><input type="text" id="name"></td>
115     </tr>
116     <tr>
117     <td>留言:</td>
118     <td><input type="text" id="memo"></td>
119     </tr>
120     <tr>
121     <td></td>
122     <td><input type="button" value="保存" onclick="saveData();"></td>
123     </tr>
124 </table>
125 <hr>
126 <table id="datatable" border="1"></table>
127 <p id="msg"></p>
128 </body>

View Code