IndexedDB入门导学

在html 5中,其中一个引人注意的新特性,那就是允许使用Indexed DB。用户可以从这个链接（http://www.w3.org/TR/IndexedDB/）了解到Indexed DB的详细标准。在本文中，将对Indexed DB作简单的入门介绍。

专注于为中小企业提供成都做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业墨玉免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

概述

从本质上说，IndexedDB允许用户在浏览器中保存大量的数据。任何需要发送大量数据的应用都可以得益于这个特性，可以把数据存储在用户的浏览器端。当前这只是IndexedDB的其中一项功能，IndexedDB也提供了强大的基于索引的搜索api功能以获得用户所需要的数据。

用户可能会问：IndexedDB是和其他以前的存储机制(如cookie,session)有什么不同？

Cookies是最常用的浏览器端保存数据的机制,但其保存数据的大小有限制并且有隐私问题。Cookies并且会在每个请求中来回发送数据，完全没办法发挥客户端数据存储的优势。

再来看下Local Storage本地存储机制的特点。Local Storage在HTML 5中有不错的支持，但就总的存储量而言依然是有所限制的。Local Storage并不提供真正的“检索API”,本地存储的数据只是通过键值对去访问。Local Storage对于一些特定的需要存储数据的场景是很适合的，例如，用户的喜好习惯，而IndexedDB则更适合存储如广告等数据（它更象一个真正的数据库）。

在我们进一步探讨Indexed DB前，我们先看下目前的主流浏览器对Indexed DB的支持。 IndexedDB目前依然是一个w3c中候选的建议规范，在这一点上规范目前还是令人感到满意的，但现在正在寻找开发者社区的反馈。该规范可能会在到***确认阶段前会因应w3c的建议有所变化。在一般情况下，目前的浏览器对IndexedDB的支持都以比较统一的方式实现，但开发者应注意在未来的更新及对此作出一定的修改。

我们来看来自CanIUse.com的对于各浏览器对IndexedDB的支持的图表，可以看到，目前桌面端浏览器对其的支持是不错的，但移动端浏览器的支持就比较少了：

Chrome for Android支持IndexedDB,但很少人目前在Android设备上使用这款浏览器。是否缺乏移动端浏览器的支持就意味着不应该使用它呢？当然不是！幸好我们的开发者都懂得持续改进的概念。象IndexedDB这样的特性可以用其他的方式添加到那些不支持该功能的浏览器中。用户可以使用包装过的类库去转换到移动端的WebSQL，又或者干脆不在移动端进行本地存储数据。我个人认为能在客户端缓存大量的数据，对使用上来说是很重要的功能，即使缺乏移动端的支持。

开始学习

首先，在使用IndexedDB前，要做的是检查当前的浏览器对IndexedDB是否支持，做法只需要使用如下代码就可以实现：

 
 
 
 
  
  
  
  document.addEventListener("DOMContentLoaded", function(){
  
  
  
   
  
  
  
      if("indexedDB" in window) {
  
  
  
          console.log("YES!!! I CAN DO IT!!! WOOT!!!");
  
  
  
      } else {
  
  
  
          console.log("I has a sad.");
  
  
  
      }
  
  
  
   
  
  
  
  },false);

上面的代码中（可以在本文下载代码中的test1.html中找到），使用了DOMContentLoaded事件在加载的过程中，通过判断在window对象中是否存在indexedDB，当然为了在接下来的过程中记住判断的最终结果，可以使用如下的代码更好地保存（test2.html）：

 
 
 
 
  
  
  
  var idbSupported = false;
  
  
  
   
  
  
  
  document.addEventListener("DOMContentLoaded", function(){
  
  
  
   
  
  
  
      if("indexedDB" in window) {
  
  
  
          idbSupported = true;
  
  
  
      }
  
  
  
   
  
  
  
  },false);

操作数据库

下面要讲解的是如何操作IndexedDB数据库。首先要了解的是，IndexedDB并不象传统的如SQL Server那样需要额外安装。Indexed是存在于浏览器端的并且能被用户所访问控制。IndexedDB和cookies和local storage的原则是一样的，就是一个IndexedDB是和一个唯一的DOMAIN相关联的。比如名为“Foo”的数据库是由foo.com所关联的，是不会和goo.com所创建的同名“Foo”数据库冲突的，因为他们属于不同的domain，并且他们之间是不能互相访问的。

打开一个数据库是通过命令执行的。基本的用法是提供数据库的名称和版本号即可，其中版本是十分重要的，稍候会作解析。下面是基本的例子：

 
 
 
 
  
  
  
  var openRequest = indexedDB.open("test",1);

打开一个IndexedDB数据库是异步的操作。为了处理操作的返回结果，需要增加一些事件的监听，目前有四种不同类型的事件监听事件：

success
error
upgradeneeded
blocked

大家可能已经能知道success和error事件的含义了。而upgradeneeded事件是在***打开数据库或者改变数据库版本的时候被触发。blocked事件是在前一个连接没有被关闭的时候被触发。

让我们看下接下来的例子(test3.html)，其中当***访问网站的时候会触发upgradeneeded事件，然后是success事件。

 
 
 
 
  
  
  
  var idbSupported = false;
  
  
  
  var db;
  
  
  
   
  
  
  
  document.addEventListener("DOMContentLoaded", function(){
  
  
  
   
  
  
  
      if("indexedDB" in window) {
  
  
  
          idbSupported = true;
  
  
  
      }
  
  
  
   
  
  
  
      if(idbSupported) {
  
  
  
          var openRequest = indexedDB.open("test",1);
  
  
  
   
  
  
  
          openRequest.onupgradeneeded = function(e) {
  
  
  
              console.log("Upgrading...");
  
  
  
          }
  
  
  
   
  
  
  
          openRequest.onsuccess = function(e) {
  
  
  
              console.log("Success!");
  
  
  
              db = e.target.result;
  
  
  
          }
  
  
  
   
  
  
  
          openRequest.onerror = function(e) {
  
  
  
              console.log("Error");
  
  
  
              console.dir(e);
  
  
  
          }
  
  
  
   
  
  
  
      }
  
  
  
   
  
  
  
  },false);

#p#

在上面的代码中，我们再一次检查当前浏览器是否支持IndexedDB，如果支持，则打开一个数据库。在这段代码中我们使用了三个事件 ――upgrade事件、成功事件和错误事件。首先看success事件,该事件通过target.result传入句柄，然后将其复制到一个全局变量db中，用作稍候添加数据用。如果用户在支持IndexedDB的浏览器中运行上面的代码，应该会在控制台看到看到Upgrading...和success的输出信息，如果再次运行的话，则只会看到输出成功的信息，因为upgradedneed事件只在***打开数据库或升级的时候被调用。

对象存储

接下来，我们学习如何存储数据。IndexedDB有一个概念称为“对象存储”。

用户可以认为这是一张典型的关系数据库中的表。对象中当然会存储了数据，但也有一个keypath和可选的索引集合。所谓的Keypaths是用户数据的唯一标识，并且可以用不同的格式表示。索引则在后面会进行讲解。

还记得之前提到的upgrademeeded事件么？要注意的是只能在upgradeneeded事件中创建一个对象。目前，默认是在用户***访问你的网站的时候会自动创建对象。同时如果要修改你的对象，则必须更新数据的版本，并且要为此编写代码，让我们来看代码的例子如下：

 
 
 
 
  
  
  
  var idbSupported = false;
  
  
  
  var db;
  
  
  
   
  
  
  
  document.addEventListener("DOMContentLoaded", function(){
  
  
  
   
  
  
  
      if("indexedDB" in window) {
  
  
  
          idbSupported = true;
  
  
  
      }
  
  
  
   
  
  
  
      if(idbSupported) {
  
  
  
          var openRequest = indexedDB.open("test_v2",1);
  
  
  
   
  
  
  
          openRequest.onupgradeneeded = function(e) {
  
  
  
              console.log("running onupgradeneeded");
  
  
  
              var thisDB = e.target.result;
  
  
  
   
  
  
  
              if(!thisDB.objectStoreNames.contains("firstOS")) {
  
  
  
                  thisDB.createObjectStore("firstOS");
  
  
  
              }
  
  
  
   
  
  
  
          }
  
  
  
   
  
  
  
          openRequest.onsuccess = function(e) {
  
  
  
              console.log("Success!");
  
  
  
              db = e.target.result;
  
  
  
          }
  
  
  
   
  
  
  
          openRequest.onerror = function(e) {
  
  
  
              console.log("Error");
  
  
  
              console.dir(e);
  
  
  
          }
  
  
  
   
  
  
  
      }
  
  
  
   
  
  
  
  },false);

上面的代码（见test4.html）中，请看upgradeneeded事件，首先是通过变量thisDB获得了打开的数据库，这个变量的其中一个属性是一个已存在的对象存储的list，名为objectStoreNames。我们可以使用contains方法检查某个对象是否已经存在了，如果不存在则可以进行创建，使用的方法是createObjectStore，因为这个是IndexedDB的同步操作，因此不需要为此进行事件监听。

总结一下，当用户访问你的网站时，如果用户的浏览器支持IndexedDB，则首先触发的是upgradeneeded事件，代码中检查是否有“firstOS”对象存在，如果没有的话则新创建一个，当用户第二次访问网站的时候，数据库的版本依然和***次访问时是相同的。

假如需要新增加另外一个对象存储，则只需要增加版本号并复制上面contains/ createObjectStore部分的代码，代码如下（见test5.html）：

 
 
 
 
  
  
  
  var openRequest = indexedDB.open("test_v2",2);
  
  
  
   
  
  
  
  openRequest.onupgradeneeded = function(e) {
  
  
  
      console.log("running onupgradeneeded");
  
  
  
      var thisDB = e.target.result;
  
  
  
   
  
  
  
      if(!thisDB.objectStoreNames.contains("firstOS")) {
  
  
  
          thisDB.createObjectStore("firstOS");
  
  
  
      }
  
  
  
   
  
  
  
      if(!thisDB.objectStoreNames.contains("secondOS")) {
  
  
  
          thisDB.createObjectStore("secondOS");
  
  
  
      }
  
  
  
   
  
  
  
  }

如何增加数据

下面我们可以开始增加数据。和传统的关系型数据库有点不同，IndexedDB允许保存对象。这意味着开发者甚至可以保存一个Javascript对象。对于数据查询是需要使用事务，事务需要两个参数，***个是将要处理的表的数组，其中的元素是表，第二个参数是事务的类型。目前有两种事务的类型：只读和读写。增加数据是属于读写操作，代码如下：

 
 
 
 
  
  
  
  var transaction = db.transaction(["people"],"readwrite");

这里指出了要设置存储对象people为读写操作，然后使用objectStore指定要操作的存储对象，存储到变量store中去

 
 
 
 
  
  
  
  var store = transaction.objectStore("people");

接下来就可以增加数据了，我们定义一个person对象，然后增加到这个store中去：

 
 
 
 
  
  
  
  var person = {
  
  
  
      name:name,
  
  
  
      email:email,
  
  
  
      created:new Date()
  
  
  
  }
  
  
  
   
  
  
  
  var request = store.add(person,1);

可以看到，这里声明了一个Javascript的普通对象，然后使用store的add方法就可以增加这个对象到对象存储中，其中add的第2个参数是标识数据的唯一标识，在这里只是暂时硬编码了，在接下来我们将不再使用硬编码的方法。

要注意增加数据的操作是异步的，所以增加两个事件监听，代码如下：

 
 
 
 
  
  
  
  request.onerror = function(e) {
  
  
  
      console.log("Error",e.target.error.name);
  
  
  
      }
  
  
  
   
  
  
  
  request.onsuccess = function(e) {
  
  
  
      console.log("Woot! Did it");
  
  
  
  }

现在我们看下test6.html，这个是包含html的完整代码：

#p#

在浏览器中运行这段代码，则可以看到如下图的HTML页面，其中在文本框输入内容，点按钮，则会在浏览器的调试工具中（我们使用的是Chrome）看到有如下的输出：

.如果使用Chrome，则可以充分利用其调试工具中对IndexedDB的可视化支持，如果点资源的TAB，展开IndexedDB的部分，则可以看到如下图所示的，我们之前创建的people存储对象。

接下来我们尝试再次点击增加按钮，这个时候注意到会输出错误的提示信息如下图，其信息表示试图增加一个已经存储的对象，违反数据约束了：

关于Key

Keys是IndexedDB的主键，传统的关系数据库可以没有keys，但每个对象存储都必须有一个key。IndexedDB允许多个不同类型的KEY。

***种方法是象上文中的那样手工指定。第二种方法是使用keypath，其中的key是基于数据自身的属性，比如people中的例子可以使用email地址作为key。第三种方法是建议采用的方法，就是使用key生成器，这有点象自动编号的主键的方法。下面是关于key的两个例子，其中一个是使用keypath,另外的是使用key生成器：

 
 
 
 
  
  
  
  hisDb.createObjectStore("test", { keyPath: "email" });  
  
  
  
  thisDb.createObjectStore("test2", { autoIncrement: true });

并且我们可以修改上一个例子中，用带key的方法创建对象：

 
 
 
 
  
  
  
  thisDB.createObjectStore("people", {autoIncrement:true});

这样的话，就可以取消之前硬编码的做法了：

 
 
 
 
  
  
  
  var request = store.add(person);

读取数据

再来看如何读取数据，读取数据要在一个事务中进行并且是异步的，下面是例子：

 
 
 
 
  
  
  
  var transaction = db.transaction(["test"], "readonly");
  
  
  
  var objectStore = transaction.objectStore("test");
  
  
  
   
  
  
  
  var ob = objectStore.get(x);
  
  
  
   
  
  
  
  ob.onsuccess = function(e) {
  
  
  
   
  
  
  
  }

在上面的代码中，首先设置为只读的事务。然后使用objectStore.get方法就可以了，要注意编写其onsuccess事件，也可以使用链式调用，如下：

 
 
 
 
  
  
  
  db.transaction(["test"], "readonly").objectStore("test").get(X).onsuccess = function(e) {}

现在我们在test8.html中，为我们之前的例子加上读取数据的部分，运行后的效果如下图：

其中读取数据的代码为：

 
 
 
 
  
  
  
  function getPerson(e) {
  
  
  
      var key = document.querySelector("#key").value;
  
  
  
      if(key === "" || isNaN(key)) return;
  
  
  
   
  
  
  
      var transaction = db.transaction(["people"],"readonly");
  
  
  
      var store = transaction.objectStore("people");
  
  
  
   
  
  
  
      var request = store.get(Number(key));
  
  
  
   
  
  
  
      request.onsuccess = function(e) {
  
  
  
   
  
  
  
          var result = e.target.result;
  
  
  
          console.dir(result);
  
  
  
          if(result) {
  
  
  
              var s = "Key "+key+"
";
  
  
  
              for(var field in result) {
  
  
  
                  s+= field+"="+result[field]+"
";
  
  
  
              }
  
  
  
              document.querySelector("#status").innerHTML = s;
  
  
  
          } else {
  
  
  
              document.querySelector("#status").innerHTML = "No match
";
  
  
  
          }   
  
  
  
      }   
  
  
  
  }

#p#

如何读取更多数据

如何读取批量的数据？也就是象传统关系数据库中读取数据集？IndexedDB支持游标的概念，这对有数据库基础的读者来说是很容易理解的，下面的代码演示了如何读取数据集：

 
 
 
 
  
  
  
  var transaction = db.transaction(["test"], "readonly");
  
  
  
  var objectStore = transaction.objectStore("test");
  
  
  
   
  
  
  
  var cursor = objectStore.openCursor();
  
  
  
   
  
  
  
  cursor.onsuccess = function(e) {
  
  
  
      var res = e.target.result;
  
  
  
      if(res) {
  
  
  
          console.log("Key", res.key);
  
  
  
          console.dir("Data", res.value);
  
  
  
          res.continue();
  
  
  
      }
  
  
  
  }

其中使用objectStore的openCursor打开游标，并且在onsuccess事件中进行处理,注意使用res获得了结果集,然后用res.continue()方法去循环读取记录集。同样，我们用这个方法去遍历之前的people存储集，代码如下：

 
 
 
 
  
  
  
  function getPeople(e) {
  
  
  
       var s = "";
  
  
  
   
  
  
  
      db.transaction(["people"], "readonly").objectStore("people").openCursor().onsuccess = function(e) {
  
  
  
          var cursor = e.target.result;
  
  
  
          if(cursor) {
  
  
  
              s += "Key "+cursor.key+"
";
  
  
  
              for(var field in cursor.value) {
  
  
  
                  s+= field+"="+cursor.value[field]+"
";
  
  
  
              }
  
  
  
              s+="
";
  
  
  
              cursor.continue();
  
  
  
          }
  
  
  
          document.querySelector("#status2").innerHTML = s;
  
  
  
      }
  
  
  
  }

可以在test9.html中看到完整的代码，我们可以不断增加人员信息，然后点获取所有信息，如下图运行效果：

IndexedDB中的索引

在本教程的***部分，讲解IndexedDB中最重要的部分就是索引了。首先是如何创建索引，这需要在upgrade事件中进行，下面是方法：

 
 
 
 
  
  
  
  var objectStore = thisDb.createObjectStore("people", 
  
  
  
                  { autoIncrement:true });
  
  
  
  objectStore.createIndex("name","name", {unique:false});
  
  
  
  objectStore.createIndex("email","email", {unique:true});

其中，在objectStore.createIndex("name","name", {unique:false});

中，***个参数就是索引的名称，第二个参数就是列。并且使用unique指定某个列是否唯一，这里只是认为email是唯一的，name是不唯一的。

那么如何使用索引呢？一旦我们在事务中获得对象存储，则可以通过索引去获得数据，一个例子如下：

 
 
 
 
  
  
  
  var transaction = db.transaction(["people"],"readonly");
  
  
  
  var store = transaction.objectStore("people");
  
  
  
  var index = store.index("name");
  
  
  
   
  
  
  
  var request = index.get(name);

接下来，可以在onsuccess事件中进行编码处理，参考test10.html，代码如下：

 
 
 
 
  
  
  
  request.onsuccess = function(e) {
  
  
  
   
  
  
  
      var result = e.target.result;
  
  
  
      if(result) {
  
  
  
          var s = "Name "+name+"
";
  
  
  
          for(var field in result) {
  
  
  
              s+= field+"="+result[field]+"
";
  
  
  
          }
  
  
  
          document.querySelector("#status").innerHTML = s;
  
  
  
      } else {
  
  
  
          document.querySelector("#status").innerHTML = "No match
";
  
  
  
      }   
  
  
  
  }

接下来看下另外一个基于索引的Range的用法，通过Range，可以获得某个数据范围之间的数据，比如字母a到字母c之间的所有name，同时还可以设置是否包含或者不包含边界（如是否包含字母a），并且可以对范围之间的数据进行排序，来看例子：

 
 
 
 
  
  
  
  //大于39
  
  
  
  var oldRange = IDBKeyRange.lowerBound(39);
  
  
  
   
  
  
  
  //大于40
  
  
  
   var oldRange2 = IDBKeyRange.lowerBound(40,true);
  
  
  
   
  
  
  
  //小于39
  
  
  
  var youngRange = IDBKeyRange.upperBound(40);
  
  
  
   
  
  
  
  //小于39
  
  
  
  var youngRange2 = IDBKeyRange.upperBound(39,true);
  
  
  
   
  
  
  
  //20到40之间
  
  
  
  var okRange = IDBKeyRange.bound(20,40)

这里使用的是一个顶层的对象名为IDBKeyRange。其中lowerBound方法指定返回的数据是大于指定的参数的，upperBound则相反，bound则返回指定范围之间的数据。下面给出一个检索的例子，其中在页面表单中可以输入搜索名称的开始和结束范围，如下：

 
 
 
 
  
  
  
  Starting with: 

  
  
  
  Ending with:

　其事件代码为：

 
 
 
 
  
  
  
  function getPeople(e) {
  
  
  
      var name = document.querySelector("#nameSearch").value;
  
  
  
   
  
  
  
      var endname = document.querySelector("#nameSearchEnd").value;
  
  
  
   
  
  
  
      if(name == "" && endname == "") return;
  
  
  
   
  
  
  
      var transaction = db.transaction(["people"],"readonly");
  
  
  
      var store = transaction.objectStore("people");
  
  
  
      var index = store.index("name");
  
  
  
   
  
  
  
     
  
  
  
      if(name != "" && endname != "") {
  
  
  
          range = IDBKeyRange.bound(name, endname);
  
  
  
      } else if(name == "") {
  
  
  
          range = IDBKeyRange.upperBound(endname);
  
  
  
      } else {
  
  
  
          range = IDBKeyRange.lowerBound(name);
  
  
  
      }
  
  
  
   
  
  
  
      var s = "";
  
  
  
   
  
  
  
      index.openCursor(range).onsuccess = function(e) {
  
  
  
          var cursor = e.target.result;
  
  
  
          if(cursor) {
  
  
  
              s += "Key "+cursor.key+"
";
  
  
  
              for(var field in cursor.value) {
  
  
  
                  s+= field+"="+cursor.value[field]+"
";
  
  
  
              }
  
  
  
              s+="
";
  
  
  
              cursor.continue();
  
  
  
          }
  
  
  
          document.querySelector("#status").innerHTML = s;
  
  
  
      }
  
  
  
   
  
  
  
  }

在上面的代码中，我们首先判断用户到底在哪个文本框中输入了检索条件，然后通过条件判断组合成了range，然后将range传递给打开游标的方法index.openCursor(range)就可以了，IndexedDB则会自动检索出符合条件的记录，例子的代码在test11.html。

在接下来的第二部分的教程中，将探讨包括更新、删除和数组方面的操作，敬请期待。

本文代码下载参见：https://github.com/tutsplus/working-with-indexeddb

标题名称：IndexedDB入门导学
标题路径：http://www.shufengxianlan.com/qtweb/news9/128709.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容