indexedDB使用总结

前言

最近在做的项目上有离线功能，需要将大量的数据存储在前端。结合项目实际需求最后决定使用indexedDB来进行存储。以下是我对indexedDB的使用以及一些踩过的坑进行总结。

1.基本使用

1.1 打开/新建数据库

使用indexedDB.open()方法

var request = window.indexedDB.open(databaseName, version);

databaseName：数据库名称，如果指定数据库不存在,则会新建该名称的数据库
version：整数，表示数据库的版本号。打开已有数据库默认为当前版本。新建数据库时，默认版本号为1。

indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过以下三种事件处理打开数据库的操作结果。
（1）onerror：打开数据库失败

request.onerror = function (event) {
  console.log('数据库打开报错');
};

（2）success：打开数据库成功

var db;
request.onsuccess = function (event) {
  db = request.result;
  console.log('数据库打开成功');
};

(3) upgradeneeded:数据库版本升级或创建数据库时触发,在该事件中创建数据表

var db;
request.onupgradeneeded = function (event) {
  db = event.target.result;
  if (!db.objecttables.contains('table')) { //判断数据库中是否已经存在该名称的数据表
    objectStore = db.createObjectStore('table', { keyPath: 'id' }); 
    objectStore.createIndex('name', 'name', { unique: false }); 
    objectStore.createIndex('age', 'age', { unique: true }); 
  }
}

db.createObjectStore('table', { keyPath: 'id' })表示新建名称为table的表，主键为id，主键（key）是默认建立索引的属性。后面会介绍详细用法
如果数据记录里面没有合适作为主键的属性，那么可以让 IndexedDB 自动生成主键。

var objectStore = db.createObjectStore('table',{ autoIncrement: true });

objectStore.createIndex('name', 'name', { unique: false })表示建立索引，可根据索引查询指定条件的数据，可建立多条索引；三个参数分别表示为索引名称，索引所在的属性，该属性是否包含相同的值

1.2 新增/更新数据

function changeData() {
  var request = db.transaction(['table'], 'readwrite') //readwrite表示有读写权限
    .objectStore('table')
    .add({ id: 1, name: 'leiyin', age: 24}); //新增数据
    或
    .put({ id: 1, name: 'leiyin', age: 24}); //更新数据
  request.onsuccess = function (event) {
    console.log('数据写入成功');
  };
  request.onerror = function (event) {
    console.log('数据写入失败');
  }
}
changeData();

PS：indexedDB都是异步操作，具体操作可在回调函数中写

1.3 读取数据

（1）根据主键读取数据
objectStore.get()方法用于读取数据，参数是主键的值。

function read() {
   var transaction = db.transaction(['table']);
   var objectStore = transaction.objectStore('table');
   var request = objectStore.get(1);
   request.onerror = function(event) {
     console.log('事务失败');
   };
   request.onsuccess = function( event) {
      if (request.result) {
        console.log(request.result);
      } else {
        console.log('未获得数据记录');
      }
   };
}
read();

(2) 通过索引读取数据
使用索引能自定义字段进行搜索，如果不建立索引则只能通过主键搜索。

var transaction = db.transaction(['table'], 'readonly');
var store = transaction.objectStore('table');
var index = store.index('name');
var request = index.get('leiyin');
request.onsuccess = function (e) {
  var result = e.target.result;
  if (result) {
    // ...
  } else {
    // ...
  }
}

(3) 通过游标和索引读取数据
上述只能读取到匹配条件的第一条数据记录，假如要获取多条满足条件的数据记录，则要使用游标。
游标与索引结合能将通过游标将所有满足所有条件的数据全部拿到。

var store = db.transaction('table','readwrite').objectStore('table');
var index = store.index('name');
var request=index.openCursor(IDBKeyRange.only('leiyin'))
request.onerror = function(e){
}
request.onsuccess = function(e){
    console.log('游标开始查询')
    var cursor = e.target.result;
    if(cursor){//必须要检查
        console.log(cursor);
        cursor.continue();//遍历了存储对象中的所有内容
    }else{
        //...
    }
};

1.4 删除数据

（1）根据主键删除数据

function remove() {
  var request = db.transaction(['table'], 'readwrite')
    .objectStore('table')
    .delete(1);
  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
}
remove();

(2) 通过游标和索引删除数据

function cursorDeldteData(db,table){
    //通过游标删除记录
    var store = db.transaction(table,'readwrite').objectStore(table);
    var request = store.openCursor();
    request.onsuccess = function(e){
        var cursor = e.target.result,
            value,
            deleteRequest;
        if(cursor){
          deleteRequest = cursor.delete();//请求删除当前项
          deleteRequest.onerror = function(){
            console.log('游标删除该记录失败');
          };
          cursor.continue();
        }
    };
}

1.5 清除数据表中的数据

由于删除数据库后不能重新创建相同名称的数据库，而项目又需要对相同名称的数据库进行操作，我选择了清除数据库中的所有表内的数据。

function clear(db,table){
    //删除存储空间全部记录
    var store = db.transaction(table,'readwrite').objectStore(table);
    store.clear();
    console.log('已删除存储空间'+table+'全部记录');
}
clear();

1.6 删除数据库

indexedDB.deleteDatabase(DatabaseName);

经测试发现，删除数据库成功后，不能再创建相同名称的数据库。

2.碰到的问题

2.1 IOS兼容性问题

问题描述：
兼容性问题，indexedDB中使用索引与游标结合可删除满足条件的多条数据，在Android中可删除多条，但在iOS中只能删除一条满足条件的数据
问题分析
经反复测试，发现iOS中cursor.continue()方法失效，该方法作用是继续向下匹配。
问题解决
1.使用递归方法实现功能。
2.但是测试后发现cursor.continue()方法删除数据要更快一些。
3为了提高性能，.判断当前设备是iOS还是Android，假如为iOS使用递归，为Android使用cursor.continue()。