IndexedDB数据库

IndexedDB 数据库

特点如下

键值对存储每一条记录有对应的主键主键是独一无二的
异步这与localStorage形成鲜明对比
支持事务支持回滚操作
同源限制不能访问跨源数据库
储存空间大一般不少于250MB
支持二进制存储例如ArrayBuffer 和 Blob对象

数据库对象 IDBDatabase 仓库 IDBObjectStore 索引 IDBIndex 事务 IDBTransaction 操作请求 IDBRequest 指针 IDBCursor 主键集合 IDBKeyRange

操作流程

打开数据库

`var request = window.indexedDB.open(databaseName, version);
`
数据库打开返回函数
1.error事件

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;
}

新建数据库

新建数据库并创建person表主键为id

request.onupgradeneeded = function(event) {
    db = event.target.result;
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}

自动生成主键

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

IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。

request.onupgradeneeded = function(event) {
  db = event.target.result;
  var objectStore = db.createObjectStore('person', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('email', 'email', { unique: true });
}

新增数据

新增数据是向数据库写入数据记录，需要通过事务完成

function add() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });

  request.onsuccess = function (event) {
    console.log('数据写入成功');
  };

  request.onerror = function (event) {
    console.log('数据写入失败');
  }
}

add();

写入数据需要新建一个事务，新建时必须指定表格名称和操作模式（只读或者读写）。新建事务以后，通过 IDBTransaction.objectStore(name) 方法，拿到IDBObjectStore对象，在通过表格对象的add() 方法，向表格写入记录，由于是异步操作，需要监听连接对象的success和error事件

读取数据

function read() {
   var transaction = db.transaction(['person']);
   var objectStore = transaction.objectStore('person');
   var request = objectStore.get(1);

   request.onerror = function(event) {
     console.log('事务失败');
   };

   request.onsuccess = function( event) {
      if (request.result) {
        console.log('Name: ' + request.result.name);
        console.log('Age: ' + request.result.age);
        console.log('Email: ' + request.result.email);
      } else {
        console.log('未获得数据记录');
      }
   };
}
read();

objectStore.get() 方法用来读取数据，参数是主键的值

遍历数据

使用指针对象 IDBCursor

function readAll() {
  var objectStore = db.transaction('person').objectStore('person');
     objectStore.openCursor().onsuccess = function (event) {
     var cursor = event.target.result;

     if (cursor) {
       console.log('Id: ' + cursor.key);
       console.log('Name: ' + cursor.value.name);
       console.log('Age: ' + cursor.value.age);
       console.log('Email: ' + cursor.value.email);
       cursor.continue();
    } else {
      console.log('没有更多数据了！');
    }
  };
}
readAll();

新建指针对象的openCursor()方法是一个异步操作，需要监听success事件

更新数据

使用 IDBObject.put() 方法

function update() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });

  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  request.onerror = function (event) {
    console.log('数据更新失败');
  }
}

update();

删除数据

IDBObjectStore.delete() 方法用于删除记录

function remove() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
}

remove();

使用索引

使用索引的意义在于可以让你搜索任意字段，如果不建立索引，默认只能搜索主键
假设新建表格的时候，对name字段建立了索引
`objectStore.createIndex('name', 'name', { unique: false });
`
现在就可以从 name 找到对应的数据记录了

var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四');

request.onsuccess = function (e) {
  var result = e.target.result;
  if (result) {
    // ...
  } else {
    // ...
  }
}