关于前端:初探IndexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据

首先回顾一下前端贮存数据罕用的 Cookie 和 WebStorage

• Cookie 是服务器发送到用户浏览器并保留在本地的一小块数据，它会在浏览器下次向同一服务器再发动申请时被携带并发送到服务器上, 通常用于放弃用户的登录状态（贮存大小不能超过 4KB）

Web Storage 蕴含如下两种机制：

• SessionStorage 为每一个给定的源维持一个独立的存储区域，仅在以后会话下无效，敞开页面或浏览器后被革除（大小为 5M 左右）
• LocalStorage 同样的性能，然而在浏览器敞开，而后从新关上后数据依然存在。除非被革除，否则永恒保留（大小为 5M 左右）

都是在客户端永恒存储数据，那 IndexedDB 与LocalStorage有什么区别呢

• LocalStorage 是同步的，IndexedDB 操作是异步的，存储一个较大的数据时，不会因为写入数据慢而导致页面阻塞
• 贮存空间不同，LocalStorage 大小为 5M 左右，IndexedDB 一般来说不少于 250M，实践上没有下限
• 都通过键值对存储数据，但 LocalStorage 的数据并不是按对象模式存储，它存储的数据都是字符串模式，如果你想让 LocalStorage 存储对象，就须要借助 JSON.stringify()能将对象变成字符串模式，再用 JSON.parse()将字符串还原成对象。IndexedDB 能够间接存储对象数组，甚至是二进制数据（ArrayBuffer 对象和 Blob 对象）
• IndexedDB 应用索引存储数据，各种数据库操作放在事务中执行，提供了更为简单的查问数据的形式

IndexedDB 的用法

首先判断浏览器是否反对IndexedDB

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
if(!window.indexedDB)
{console.log("你的浏览器不反对 IndexedDB");
}

当浏览器反对 IndexedDB 就能够创立一个申请去关上数据库。

let request = window.indexedDB.open(dbInfo.name, dbInfo.version);

这个办法承受两个参数，第一个参数是字符串，示意数据库的名字。如果指定的数据库不存在，就会新建数据库。第二个参数是整数，示意数据库的版本。如果省略，关上已有数据库时，默认为以后版本；新建数据库时，默认为 1。

indexedDB.open()办法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，解决关上数据库的操作后果。

error 事件示意关上数据库失败

request.onerror = function (e) {console.log('数据库关上谬误');
  console.dir(e);
};

success 事件

let db;
 
request.onsuccess = function (e) {
  db = request.result;    // 通过 request 对象的 result 属性拿到数据库对象
  console.log('数据库关上胜利');
};

upgradeneeded 事件

触发条件：

• 第一次关上数据库，数据库不存在，就会初始化数据库，版本从无到有
• 版本号更新，指定的版本号大于数据库的理论版本号

let db;
 
request.onupgradeneeded = function (e) {
  db = e.target.result;
  console.log('数据库初始化或更新胜利');
}

个别在 onupgradeneeded 事件里新建对象仓库（新建表）

新建对象仓库（新建表）

let db;
 
request.onupgradeneeded = function (e) {
  db = e.target.result;
  console.log('数据库初始化或更新胜利');
  let objectStore = db.createObjectStore('person', { keyPath: 'id', autoIncrement: true});
}

以上新建 person 表，主键为 id，id 自增

应用索引

索引的意义在于，能够让你搜寻任意字段，也就是说从任意字段拿到数据记录。如果不建设索引，默认只能搜寻主键（即从主键取值）。

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

下面代码中，IDBObject.createIndex()的三个参数别离为索引名称、索引所在的属性、配置对象（阐明该属性是否蕴含反复的值）

这样，就能够应用 name 或者 email 来找到对应的数据记录

增

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

为了往数据库里新增数据，咱们首先须要创立一个事务，并要求具备读写权限。在 indexedDB 里任何的存取对象的操作都须要放在事务里执行。

事务模式：

• readonly 只读
• readwrite 读写

删

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

改

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

查

获取所有数据

getAll()

function readAll() {var objectStore = db.transaction('person').objectStore('person');
 
  objectStore.getAll().onsuccess = function (event) {data = event.target.result; // 所有数据};
}
 
readAll();

通过指针

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

查问某数据

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

通过索引

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