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个参数

首先个参数:字符串,代表数量库名

其次个参数:无符号长整形数值,代表版本号

演示代码如下

NoSQL 1NoSQL 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事件来监听数据库连接的乞请对象

以身作则代码如下

NoSQL 3NoSQL 4

 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属性值用于指定对象仓库中该记录每一条记下使用哪个属性值来作为该记录的主键值。相关办法求证

NoSQL 5NoSQL 6

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

View Code

示范代码如下

NoSQL 7NoSQL 8

 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对象

演示代码如下

NoSQL 9NoSQL 10

 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方式开启事务

NoSQL 11NoSQL 12

 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方法举行保存数据

 示例代码

NoSQL 13NoSQL 14

 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)

 示例源码

NoSQL 15NoSQL 16

 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个艺术的详解如下

NoSQL 17NoSQL 18

 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:数据按主键值升序排列,主键值极度的数码只读取第一条数据

NoSQL,prev:数据按主键值降序排列,主键值分外的多寡均被读取到游标中

prevunique:数据按主键值降序排列,主键值非凡的数码只读取第一条数据

 

以身作则代码

NoSQL 19NoSQL 20

 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留言本

代码示例

NoSQL 21NoSQL 22

  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

 

网站地图xml地图