第十一節：操作流程 · HTML5 開發

## 第十一節：操作流程 ### （1）打開數據庫使用 IndexedDB 的第一步是打開數據庫，使用`indexedDB.open()`方法。 ~~~ var request = window.indexedDB.open(databaseName, version); ~~~ 這個方法接受兩個參數，第一個參數是字符串，表示數據庫的名字。如果指定的數據庫不存在，就會新建數據庫。第二個參數是整數，表示數據庫的版本。如果省略，打開已有數據庫時，默認為當前版本；新建數據庫時，默認為`1`。 `indexedDB.open()`方法返回一個 IDBRequest 對象。這個對象通過三種事件`error`、`success`、`upgradeneeded`，處理打開數據庫的操作結果。 * `error`事件表示打開數據庫失敗。 ~~~ request.onerror = function (event) { console.log('數據庫打開報錯'); }; ~~~ * `success`事件表示成功打開數據庫。 ~~~ var db; request.onsuccess = function (event) { db = request.result; console.log('數據庫打開成功'); }; ~~~ 這時，通過`request`對象的`result`屬性拿到數據庫對象。 * 如果指定的版本號，大于數據庫的實際版本號，就會發生數據庫升級事件`upgradeneeded`。 ~~~ var db; request.onupgradeneeded = function (event) { db = event.target.result; } ~~~ 這時通過事件對象的`target.result`屬性，拿到數據庫實例。 ### （2）新建數據庫新建數據庫與打開數據庫是同一個操作。如果指定的數據庫不存在，就會新建。不同之處在于，后續的操作主要在`upgradeneeded`事件的監聽函數里面完成，因為這時版本從無到有，所以會觸發這個事件。通常，新建數據庫以后，第一件事是新建對象倉庫（即新建表）。 ~~~ request.onupgradeneeded = function(event) { db = event.target.result; var objectStore = db.createObjectStore('person', { keyPath: 'id' }); } ~~~ 上面代碼中，數據庫新建成功以后，新增一張叫做`person`的表格，主鍵是`id`。更好的寫法是先判斷一下，這張表格是否存在，如果不存在再新建。 ~~~ request.onupgradeneeded = function (event) { db = event.target.result; var objectStore; if (!db.objectStoreNames.contains('person')) { objectStore = db.createObjectStore('person', { keyPath: 'id' }); } } ~~~ 主鍵（key）是默認建立索引的屬性。比如，數據記錄是`{ id: 1, name: '張三' }`，那么`id`屬性可以作為主鍵。主鍵也可以指定為下一層對象的屬性，比如`{ foo: { bar: 'baz' } }`的`foo.bar`也可以指定為主鍵。如果數據記錄里面沒有合適作為主鍵的屬性，那么可以讓 IndexedDB 自動生成主鍵。 ~~~ var objectStore = db.createObjectStore( 'person', { autoIncrement: true } ); ~~~ 上面代碼中，指定主鍵為一個遞增的整數。新建對象倉庫以后，下一步可以新建索引。 ~~~ 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()`的三個參數分別為索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重復的值）。 ### （3）新增數據新增數據指的是向對象倉庫寫入數據記錄。這需要通過事務完成。 ~~~ 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`事件，了解是否寫入成功。 ### （4）讀取數據讀取數據也是通過事務完成。 ~~~ 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()`方法用于讀取數據，參數是主鍵的值。 ### （5）遍歷數據遍歷數據表格的所有記錄，要使用指針對象 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`事件。 ### （6）更新數據更新數據要使用`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(); ~~~ 上面代碼中，`put()`方法自動更新了主鍵為`1`的記錄。 ### （7）刪除數據 `IDBObjectStore.delete()`方法用于刪除記錄。 ~~~ function remove() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .delete(1); request.onsuccess = function (event) { console.log('數據刪除成功'); }; } remove(); ~~~ ### （8）使用索引索引的意義在于，可以讓你搜索任意字段，也就是說從任意字段拿到數據記錄。如果不建立索引，默認只能搜索主鍵（即從主鍵取值）。假定新建表格的時候，對`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 { // ... } } ~~~