IndexDB

参考：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

	cookie	localStorage	IndexedDB
大小	不超过4KB	2.5MB-10MB	存储大量数据（不少于250MB）
区别	每次请求都会发送回服务器	不提供搜索功能，不能建立自定义的索引	提供查找接口，还能建立索引
		同步	异步

特点：

1）IndexedDB 不属于关系型数据库（不支持 SQL 查询语句）

2）键值对储存 所有类型的数据都可以直接存入，包括 JavaScript 对象。

3）异步 防止大量数据的读写，拖慢网页的表现。

4）支持事务（transaction） 这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

5）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

 

一、API(indexDB各种对象接口)

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

1）对象仓库

每个数据库包含若干个对象仓库（object store）类似于关系型数据库中的table.

2）数据记录

数据仓库中保存的是数据记录，类似于关系型数据库中的行，但只有主键和数据体两部分。（主键用来建立默认索引，必须不同；主键可以是数据纪录中的一个属性，也可以是一个递增的整数编号）

3）索引

为了加速数据的检索，可以在对象仓库中，为不同的属性建立索引。

4）事务

数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。

 

二、操作

1. 打开数据库

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

这个方法接受两个参数，第一个参数是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。

第二个参数是整数，表示数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。

indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。

onsuccess

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

onupgradeneeded:如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件

var db;

request.onupgradeneeded = function (event) {
  db = event.target.result;
}

2. 新建数据库

新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。

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

// 新增一张叫做person的表格，主键是id

• 主键（key）是默认建立索引的属性。
• 主键也可以指定为下一层对象的属性，比如{ foo: { bar: 'baz' } }的foo.bar也可以指定为主键。
• 如果数据记录里面没有合适作为主键的属性，那么可以让 IndexedDB 自动生成主键。

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

3. 新建索引

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 });  // 索引名称、索引所在的属性、配置对象
}

    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 {
        // ...
      }
    }

 

4.1  新建数据

新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

    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()方法，向表格写入一条记录。

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

    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();

4.3 遍历数据

    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();

4.4. 更新数据

function updata () {
    var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({id:1, name:'lixing', age:25 email: 'lixing@sina.com'});
    
  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

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

update();

4.5 删除数据

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

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

remove()