IndexedDB使用方法小结

测试了一下IndexedDB。记录一下。

为什么IndexedDB

cookie 、localStorage 容量小,Web SQL Database被废。

简单使用

常用的数据库的操作方法无非增、删、改、查。在IndexedDB中实现上述4种操作:

  1. 打开数据库 --> window.indexedDB.open方法
  2. 建“表” --> createObjectStore方法
  3. 创建数据库事务并获取指定的“表” --> transaction事务方法 --> objectStore 获取“表”方法
  4. 增删改查操作 --> add添加数据方法 --> get读取数据方法 --> delete删除数据方法 --> put更新数据方法 --> openCursor 遍历数据方法

使用示例

  1    var db = {};
  2    var store = {};
  3    /**
  4     * open数据库并建“表”
  5     *
  6     * open方法是一个异步的过程
  7     * onsuccess 打开成功的回调
  8     * onerror 打开失败的回调
  9     * onupgradeneeded 第一次打开数据库,或数据库版本发生变化回调
 10     * 还有一种是blocked事件,表示上一次的数据库连接还未关闭
 11     */ 
 12    var request = window.indexedDB.open('myDB', '1');
 13      request.onsuccess = function(openData) {
 14        db = openData.target.result;
 15        triggerTransaction();
 16      };
 17      request.onupgradeneeded = function(upData) {
 18        db = upData.target.result;
 19        if (!db.objectStoreNames.contains('dbtable')) {
 20          //建表,并设置自动递增的整数作为键名
 21          db.createObjectStore('dbtable', {
 22            autoIncrement: true,
 23          });
 24        }
 25      };
 26      request.onerror = function(e) {
 27        console.log('open error', e);
 28      };
 29      
 30      /**
 31       * 创建事务并获取指定的“表”
 32       *
 33       * 使用transaction创建事务。
 34       * 创建事务也是一个异步过程,包含下面的回调。
 35       * abort:事务中断。
 36       * complete:事务完成。
 37       * error:事务出错。
 38       *
 39       * 使用objectStore获取指定的“表”
 40       * 
 41       */ 
 42      function triggerTransaction(){
 43        var t = db.transaction(['dbtable'], 'readwrite');
 44        store = t.objectStore('dbtable');
 45        triggerAdd();
 46        t.oncomplete = function(e) {
 47          console.log('transaction success.')
 48        };
 49        t.onabort = function(e) {
 50          console.log('transaction abort.');
 51        };
 52        t.onerror = function(e) {
 53          console.log('transaction error.');
 54        };
 55      }
 56
 57      /**
 58       * 添加数据
 59       *
 60       * 使用add方法,有两种状态回调
 61       *
 62       * error 添加数据失败
 63       * success 添加数据成功
 64       */ 
 65      function triggerAdd() {
 66        var flag = 0;
 67        for (var i = 0; i < 5; i++) {
 68          var tmpData = {
 69            name: '测试数据'+i
 70          };
 71          var addRel = store.add(tmpData);
 72          addRel.onerror = function(e) {
 73            console.log('add error.');
 74          };
 75          addRel.onsuccess = function(e) {
 76            console.log('add successfully.');
 77            flag++;
 78            if( flag === 5 ) {
 79              triggerPut();
 80            }
 81          };
 82        }
 83      }
 84      
 85      /**
 86       * 修改数据
 87       *
 88       * 使用put方法,有两种状态回调
 89       * error 修改数据失败
 90       * success 修改数据成功
 91       */ 
 92      function triggerPut(){
 93        var modifyRel = store.put({
 94          name: '这不是测试数据'
 95        }, 2);
 96        modifyRel.onerror = function(e) {
 97          console.log('modify error.');
 98        };
 99        modifyRel.onsuccess = function(e) {
100          console.log('modify successfully.');
101          triggerDel();
102        };
103      }
104
105      /**
106       * 删除数据
107       *
108       * 使用delete方法,有两种状态回调
109       * error 删除数据失败
110       * success 删除数据成功
111       */ 
112      function triggerDel() {
113        var delRel = store.delete(1);
114        delRel.onerror = function(e) {
115          console.log('delete error.');
116        };
117        delRel.onsuccess = function(e) {
118          console.log('delete successfully.');
119          triggerGet();
120        };
121      }
122
123      /**
124       * 获取数据
125       *
126       * 使用get方法,有两种状态回调
127       * error 获取数据失败
128       * success 获取数据成功
129       */ 
130      function triggerGet() {
131        var getRel = store.get(2);
132        getRel.onerror = function(e) {
133          console.log('get error.');
134        };
135        getRel.onsuccess = function(e) {
136          console.log('get successfully.');
137          console.log(e.target.result);
138          triggerCur();
139        };
140      }
141
142      /**
143       * 遍历数据
144       *
145       * 使用openCursor方法,有两种状态回调
146       * error 遍历数据失败
147       * success 遍历数据成功
148       */ 
149      function triggerCur() {
150        var curRel = store.openCursor();
151        curRel.onsuccess = function(event) {
152          var cursor = event.target.result;
153          if (cursor) {
154            console.log(cursor.value);
155            cursor.continue();
156          } 
157        };
158        curRel.onerror = function(e) {
159          console.log('opencursor error');
160        };
161      } 

上述代码实现了IndexedDB的调用过程,实现了插入、修改、删除、遍历的过程,运行结果可以通过Chrome的控制台查看。

参考