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: '[e-mail]' });

      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: '[e-mail]'});
    
  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()