Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

indexedDB(肆) 数据操作

  之前的几篇一直都在说数据库本身的操作,对数据操作都是一笔带过的。其实数据的操作在indexedDB中也没什么难点,因为文档很全。我也只是参考文档把所有方法都试用一遍而已。indexedDB为数据操作提供了很多方法,现在我们就来将它们逐个击破吧。
  首先,咱来个方法截个图
  这个是直接在Chrome控制台上截的图,MDN和MSDN上也都有(在本文的末尾有链接)。indexedDB毕竟不是SQL,所以没有SQL语句的操作,而是把对数据的操作都做成对象的方法。这个图上列出了存储对象的全部方法,createIndex、deleteIndex、index,这个三个是关于存储对象的索引操作,这篇就不说了。主要是:add、clear、count、delete、get、openCursor、put,这么几个方法。这些其实在之前的文章中就有用过一些,只是没有详细说明而已。我们先把打开和初始化数据库的代码写出来,后面的代码都是基于这个之上的。由于前面几篇中已经说的很详细了,这个打开和初始化数据库的代码就不注释了。
window.indexedDB=window.indexedDB||window.webkitIndexedDB;
var cn,db;
indexedDB.deleteDatabase("MyDB");
cn=indexedDB.open("MyDB",1);
cn.onupgradeneeded=function(e){
  db=e.target.result;
  var o=db.createObjectStore("MyOBJ",{keyPath:"key"});
  o.createIndex("值","value",{unique:true});
};
cn.onsuccess=function(e){
  db=e.target.result;
  db.doTransaction=function(f){
    var o=db.transaction("MyOBJ","readwrite");
    o.onerror=function(){console.log("事务运行错误")};
    f(o.objectStore("MyOBJ"));
  };
};
  首先来看看数据的写入。和普通的localStorage不同的是,indexedDB不仅可以存储字符串,还可以存储一些JavaScript对象。不过储存的对象必须是可复制的。当我们储存一个对象时,它是按值传递的,也就是克隆一个对象副本传递进去。关于对象的可复制性,请参考这篇文章“hasOwnProperty与对象的可复制性”。 <input type="button" value="添加数据" id="btn_add" />
<script>
//这里放置打开和初始化数据库的代码

btn_add.onclick=function(){
  db.doTransaction(function(e){
    //清空存储对象内原来的数据
    e.clear();
    //写入下列数据
    e.add({key:"对象",value:{}});
    e.add({key:"数组",value:[]});
    e.add({key:"数字",value:3.14});
    e.add({key:"布尔",value:true});
    e.add({key:"字符串",value:"次碳酸钴"});
  });
};
</script>

  上面这只是例子,可以存储的对象当然不止这些了,所有可复制的对象都可以储存。现在不纠结这个,来看看另一个写入数据的方法put。我们一直都在使用add,就像它的名字一样它是用来添加记录的。但是,使用add添加记录时,当遇到主键约束或唯一约束时就会让事务进入错误回调中。put一样是添加记录,而它在处理主键约束时不是跳过而是覆盖原来的。但它也仅限于主键约束,对于普通索引的唯一约束它也无法正常工作。
<input type="button" value="add主键约束" id="btn_test1" />
<input type="button" value="put主键约束" id="btn_test2" />
<input type="button" value="put唯一约束" id="btn_test3" />
<script>
//这里放置打开和初始化数据库的代码

btn_test1.onclick=function(){
  db.doTransaction(function(e){
    e.clear();
    e.add({key:"a",value:1});
    e.add({key:"a",value:2});
  });
};
btn_test2.onclick=function(){
  db.doTransaction(function(e){
    e.clear();
    e.put({key:"b",value:4});
    e.put({key:"b",value:5});
  });
};
btn_test3.onclick=function(){
  db.doTransaction(function(e){
    e.clear();
    e.put({key:"c",value:0});
    e.put({key:"d",value:0});
  });
};
</script>
  这个测试结果比较多,我就不截图了。添加记录的问题大概就是这些,下面来说说读取记录。既然是key-value储存的,我当然是用key来读取记录了,系统有提供get方法,可以直接get一个key来获取相应的记录。但是要注意的是,indexedDB始终离不开的一点就是异步,即使仅仅是读取一条记录也需要异步。下面是代码 <input type="button" value="测试" id="btn_test" />
<script>
//这里放置打开和初始化数据库的代码

btn_test.onclick=function(){
  db.doTransaction(function(e){
    e.clear();
    //先插入一条记录以便读取
    e.add({key:"a",value:"次碳酸钴"});
    //读取a,这个记录存在可以读取到数据
    e.get("a").onsuccess=function(e){
      var o=e.target.result;
      console.log(o);
    };
    //这个不存在,只能读取到undefined
    e.get("b").onsuccess=function(e){
      var o=e.target.result;
      console.log(o);
    };
  });
};
</script>

  根据主键来读取一条记录很简单,只是要注意是异步,操作起来有点麻烦。下面是记录的遍历,这个其实在“indexedDB的基本操作”中就已经演示过了,这里就不重复了。实际上遍历是很复杂的行为,这个将在以后的文章中介绍。最后是几个简单的方法count、delete、clear。clear这个方法我们在上面的代码中已经用过了,就是清除存储对象的数据而已,没有什么特别的地方。最后是count和delete <input type="button" value="测试" id="btn_test" />
<script>
//这里放置打开和初始化数据库的代码

btn_test.onclick=function(){
  db.doTransaction(function(e){
    e.clear();
    //先插入几条记录
    e.add({key:"a",value:1});
    e.add({key:"b",value:2});
    e.add({key:"c",value:3});
    //输出记录条数 输出3
    e.count().onsuccess=function(e){
      console.log(e.target.result);
    };
    //删除主键为b的记录
    e.delete("b");
    //输出记录条数 由于b被删除了,剩下两条记录 输出2
    e.count().onsuccess=function(e){
      console.log(e.target.result);
    };
  });
};
</script>
  这个结果只是简单的两个数字而已,我也不截图了。以上就是indexedDB的数据操作。关键的关键就是记住一条,一切皆异步,再简单的操作咱都要异步的来。

参考:
  https://developer.mozilla.org/en-US/docs/IndexedDB/IDBObjectStore
  http://msdn.microsoft.com/en-us/library/windows/apps/hh465965.aspx
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^