关于indexeddb: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 {
    // ...
  }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理