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