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)事务

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

 

二、操作

1. 打开数据库

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

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

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

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

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

 

上一篇:Discourse 有什么办法可以设置全局通知


下一篇:Sencha Modern