Web 技术研究所

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

indexedDB(贰) 存储对象

  indexedDB也是使用看似二维表来存储数据的,但实际上是线性的对象序列,这些序列被称为存储对象。这些存储对象还可以设置上相应的索引来做更为复杂的操作,但并不是任何时候都可以修改存储对象的结构。通常一次性设置完毕,以后就很少改动了。
  实际上indexedDB的数据对象只是普通的key-value结构,这样看来只是个列表。但是这个value可以是JavaScript的Object,也就是说又是key-value结构。这两个key-value结构叠加起来就成了一个二维表。实际上最为数据的JavaScript对象还可以是树形的,所以它甚至可以作为一个高维表来使用。indexedDB还可以为Object的键值加上一些索引和约束来实现更复杂的功能。
  下面这个代码片段是创建三个不同配置的存储对象 cn.onupgradeneeded=function(e){
  db=e.target.result;
  //TAB1只有id主键
  db.createObjectStore("TAB1",{keyPath:"id"});
  //TAB2主键不设名字,只是自增而已
  db.createObjectStore("TAB2",{autoIncrement:true});
  //TAB3主键有名字,且自增
  var o=db.createObjectStore("TAB3",{keyPath:"id",autoIncrement:true});
  //给TAB3添加title索引,
  //第一个参数是索引名
  //第二个参数是索引的字段名(多个时可以使用数组)
  //第三个参数是的配置信息,目前版本有unique和multiEntry可用
  o.createIndex("title","title",{unique:true});
};
  这些初始化操作必须在upgradeneeded事件中完成,它只会在创建数据库或数据库版本提升时触发,所以一旦创建就要尽量减少更改。创建了存储对象后我们就可以写入数据了。 <input type="button" value="写入数据" id="writeButton" />
<script>
window.indexedDB=window.indexedDB||window.webkitIndexedDB;

var cn,db;

var cn=indexedDB.open("MyDB",1);

//这里放上面的初始化事件

cn.onsuccess=function(e){
  db=e.target.result;
  //由于这次是操作多个存储对象,所以就不自定义个方法来操作了
};

writeButton.onclick=function(){
  var s,t1,t2,t3,i;
  //创建事务对象
  s=db.transaction(["TAB1","TAB2","TAB3"],"readwrite");
  //获取存储对象
  t1=s.objectStore("TAB1");
  t2=s.objectStore("TAB2");
  t3=s.objectStore("TAB3");
  //清空数据
  t1.clear();t2.clear();t3.clear();
  //循环写入数据
  for(i=0;i<100;i++){
    //TAB1只有id字段
    t1.add({id:i});
    //TAB2虽有id字段,但是自增的,不需要赋值
    t2.add({});
    //TAB3的id字段自增的,不需要赋值。但是title需要
    t3.add({title:i});
  };
};
</script>

  写入数据不能和修改数据库结构在同一个事务中,应该在onsuccess事件触发之后再创建事务来写入数据。indexedDB没有传统关系数据库那么复杂的数据结构和关系,只是做简单的key-value存储而已。写入数据就和对数组push一个object那么简单。
  自增字段可以不用指定值,自增的字段是从1开始的,我们循环赋值的title是从0开始的所以得到这样一个表。当然我们可以添加更多的字段来做更复杂的表,上面的代码只是个例子而已。还要注意一点,当我们调用clear来清空存储对象的数据时,自增字段的开始位置数据不会被清空,除非删除整个存储对象。

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