Web 技术研究所

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

indexedDB(壹) 基本操作

  indexedDB的出现是Web前端数据存储发展的一个伟大进步,Chrome和Firefox都可以兼容,IE从10才开始兼容。比起WebSQL,indexedDB的使用要繁琐一些,不过它的功能也要强大一些。indexedDB的操作基本上是异步的,需要通过回调函数来操作对象。
  indexedDB的工作流程有点复杂,打开一个数据库的步骤大概是这样的:
  1. 调用open方法,返回一个数据库连接对象
  2. 如果数据库不存在或数据库请求升级
    1. 触发数据库连接对象上的数据初始化事件
  3. 如果数据库成功打开或创建成功
    1. 触发数据库连接对象上的成功事件
  4. 否则
    1. 触发数据库连接对象上的失败事件
  由于初始化事件未必会被调用,所以我们通常在成功事件中获取数据库对象。 //调整webkit兼容性
window.indexedDB=window.indexedDB||window.webkitIndexedDB;

var cn,db;

//打开数据库
//第一个参数是数据库名(打开即创建,没有其它独立的创建方法)
//其它参数以后解释
var cn=indexedDB.open("MyDB");

//数据库初始化事件
cn.onupgradeneeded=function(e){
  //获取数据库对象
  db=e.target.result;
  //创建数据库实例
  //第一个是存储对象名,类似关系数据库的表名
  //第二个参数是主键名,还有其他选项,可以设置自增的
  var o=db.createObjectStore(
    "MyOBJ",{keyPath:"title"}
  );
};

//数据库打开成功事件
cn.onsuccess=function(e){
  //获取数据库对象
  //因为上面的初始化事件未必会被调用到,这里当然也得获取一次
  db=e.target.result;
  //这个是我自定义的方法,为了方便操作而已
  //因为indexedDB的事务机制也是异步的
  //如果不定义一个方法来简化这个事物操作每次都要去创建事物,获取储存对象很麻烦
  //这个doTransaction的参数是一个回调函数,可以把这个回调函数当作事物的过程使用
  db.doTransaction=function(f){
    //db的transation方法是开始一个事务
    //第一个参数是要操作的数据库(多个时可以用数组),表示这个事务中使用的存储对象
    //第二个参数是访问模式,目前的版本支持readwrite和readonly两种操作
    //从事务对象闪使用objectStore访问具体的存储对象,并把结果传给回调函数
    f(db.transaction("MyOBJ","readwrite").objectStore("MyOBJ"));
  };
};
  这些就是indexedDB的打开与创建。其实代码不多,只是注释多,好好看很容易明白。打开了数据库之后,我们在成功事件中已经把数据库对象放入全局变量里了吧。接着,我们要用这个打开的数据库对象来写入和读取数据。这些放到交互中操作,首先放置两个按钮,一个是写入一个是读取。 <input type="button" value="读取数据" id="readButton"/>
<input type="button" value="添加数据" id="writeButton"/>
<script>
//这里放入上面打开数据库的代码
//因为后面的代码中要用到打开的数据库

readButton.onclick=function(){
  //调用我们自己添加的方法来处理一个事务
  db.doTransaction(function(e){
    //openCursor是把游标移动到初始位置
    //这个方法参数比较复杂,以后再说
    e.openCursor().onsuccess=function(e){
      //获取当前游标对象所在行
      var r=e.target.result;
      //如果行不村咋,就退出,其实就是EOF的情况
      if(!r)return;
      //输出行数据到控制台
      console.log(r.value);
      //游标下移,这个方法也会触发成功事件
      //所以变成递归遍历数据了
      r.continue();
    };
  });
};
writeButton.onclick=function(){
  //调用我们自己添加的方法来处理一个事务
  db.doTransaction(function(e){
    //清除原有的数据
    e.clear();
    //循环写入100条数据
    //这个e是存储对象,除了add,还有好多方法,这个我们也以后再说
    for(var i=0;i<100;i++)e.add({title:i});
  });
};
</script>

  这篇文章就是说这个基本的数据库连接和读写,只要好好看这个例子就一定可以明白的(注释比代码还多了)。其实只要记住一个核心思想:异步。几乎所有操作都是异步的,即使是仅读取一条记录也必须异步。

参考:
  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成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^