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

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

一、连接数据库

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

  1. var dbName = 'indexedDBTest';      //数据库名
  2. var dbVersion = 20170603;            //版本号
  3. /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
  4. 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.

二、数据库的版本更新

　　成功连接数据库后，还应该创建相当于关系型数据库中的数据表的对象仓库（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>

三、创建对象仓库

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

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

  1. var name = 'Users';
  2. var optionalParameters = {
  3.     keyPath: 'userId',
  4.     autoIncrement: false
  5. };
  6. var store = idb.createObjectStore(name, optionalParameters);

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

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

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

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

示例代码如下

  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>

四、创建索引

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

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

  1. var name = 'userNameIndex';
  2. var keyPath = 'userName';
  3. var optionalParameters = {
  4.     unique: false,
  5.     multiEntry: false
  6. };
  7.  
  8. 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.

五、使用事务

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

　　在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()

该方法有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>

7、获取数据

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

  1. 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>

8、根据主键值检索数据

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

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

  1. var range = IDBKeyRange.bound(1,4);
    var direction = "next";
  2. 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.  only方法使用示例
  11.  var range = IDBKeyRange.only(value);
  12.  
  13.  该方法返回一条数据，该方法有一个参数，整数值，代表该数据的主键值
  14.  
  15.  lowerBound方法使用示例
  16.  var range = IDBKeyRange.lowerBound(lower,lowerOpen);
  17.  
  18.  该方法返回一批数据。返回的所有数据的主键值均大于等于第一个参数。该方法有两个参数
  19.  第一个参数：整数值，代表该集合中的最小主键值
  20.  第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最小主键值；当值为true时，代表该集合对象中排除最小主键值
  21.  
  22.  upperBound方法使用示例
  23.  var range = IDBKeyRange.lowerBound(upper,upperOpen);
  24.  
  25.  该方法返回一批数据，返回的所有数据的主键值均小于等于第一个参数。该方法有两个参数
  26.  第一个参数：整数值，代表该集合中的最小主键值
  27.  第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最大主键值；当值为true时，代表该集合对象中排除最大主键值

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

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>

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>

html5本地存储（三）--- 本地数据库 indexedDB的更多相关文章

  1. HTML5本地存储之本地数据库篇

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. iOS 图片本地存储、本地获取、本地删除

    在iOS开发中.经常用到图片的本地化. iOS 图片本地存储.本地获取.本地删除,可以通过以下类方法实现. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: ...

  3. HTML5系列三（多媒体播放、本地存储、本地数据库、离线应用）

    各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...

  4. Html5 学习系列（六）Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  5. Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  6. HTML5本地存储和本地的数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  7. HTML5离线存储和本地缓存

    一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...

  8. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  9. HTML5 学习总结（三）——本地存储（localStorage、sessionStorage、WebSqlDataBase、IndexedDB）

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  10. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. git操作的日常用法

    参考博客:  https://blog.csdn.net/afei__/article/details/51567155# 最近一段时间总结一些git在个人日常开发当中用到的方法, 并记录下来, 同时 ...

  2. C#基本语法1 ----> 实例

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. ///////////////////////////////////////////////////////////////////// ...

  3. 为什么javaBean要有get/set方法的设计

    可以应对将来的修改,比如有一个以长度计算的项目开发好了,过段时间客户说这个项目要在美国上市,有了javaBean只要把所有以厘米计算的单位都乘以2.54转化为正确单位交给客户 public class ...

  4. UVALive 4794 Sharing Chocolate

    Sharing Chocolate Chocolate in its many forms is enjoyed by millions of people around the world ever ...

  5. ReentrantLock的相关方法使用

    获取锁定 void lock():常用获取锁定的方法 void lockInterruptibly():如果当前线程未被中断,则获取锁定:如果当前线程被中断,则出现异常 boolean tryLock ...

  6. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  7. EXCEL数据计算不准确的问题

    今天,某部门的excel的数值计算,总是出现错误.如下图 ,我们的46那一栏是有前面8*6得出来的,但是结果却显示46,明明应该是48才对,然后再往上追,8是有前面的337-329得出来的,337是有 ...

  8. MySQL练习题--sqlzoo刷题

    首先查看world表的字段: name continent area population gdp capital tld flag SELECT * FROM world: 2.显示人口至少为2亿的 ...

  9. QPrinter

    在使用到QPrinter和QprintDialog类时的附加处理 ①若是在qt creator中,需要在 (.pro)工程文件中加入 “QT+= printsupport”,否则会编译报错

  10. Application.mk语法解释（转）

    转自:http://blog.csdn.net/roland_sun/article/details/46318893 Application.mk是用来描述你的应用程序需要哪些模块,以及这些模块所要 ...