createObjectStore() 建立物件倉庫

admin發表於2019-06-12
Object物件

通過IndexedDB.open()方法可以建立或者開啟一個資料庫。

有了資料庫之後，那需要建立物件倉庫（類同與關係型資料庫中的表）進行資料操作。

關於IndexedDB.open()用法可以參閱IndexedDB.open()開啟與新建資料庫一章節。

通過createObjectStore方法可以建立物件倉庫，此方法屬於IDBDatabase物件。

關於IDBDatabase可以參閱IDBDatabase 資料庫物件一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let objectStore = IDBDatabase.createObjectStore(name, options);

引數解析：

（1）.name：必需，要建立的物件倉庫名稱，如果已經存在則報錯。

（2）.options：可選，一個物件，規定儲存資料的主鍵。

一.主鍵介紹：

如果你使用過其他關係型資料庫，那麼對主鍵概念肯定非常熟悉。

IndexedDB資料庫中的主鍵概念與關係型資料中的主鍵大同小異，用於唯一標識對應的資料。

物件倉庫中的每一條資料都必須有一個主鍵，用於唯一標識當前資料，它也是資料的預設索引。

通過IDBObject.createIndex()方法可以自定義索引，以方便資料操作。

關於本方法第二個引數對於主鍵的配置後續會通過程式碼例項詳細介紹。

二.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let request = window.indexedDB.open("antzone", 1);
request.onsuccess = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('person')) {
    let objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  let objectStore = db.createObjectStore("person",{ keyPath: 'id' });
}
</script>
</head>
<body>
  <p>上述程式碼建立一個名為"antzone"</p>
</body>
</html>

上述程式碼會建立一個物件倉庫，下面對程式碼進行一下分析。

aid[3323]

程式碼分析如下：

（1）.如果是新建資料庫，那麼會首先觸發upgradeneeded，再觸發success事件。

（2）.如果資料庫已經存在，那麼只觸發success事件。

（3）.success事件處理函式中的判斷非常重要，否則如果是新建資料庫，在upgradeneeded事件處理函式中建立物件倉庫後，在success事件處理函式中再次建立同名事件處理函式會報錯，所以首先要判斷是否已經存在指定物件倉庫。

（4）.通過{ keyPath: 'id' }規定新增資料的主鍵是id。

下面通過程式碼例項為上述建立的物件倉庫新增一條資料：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let request = window.indexedDB.open("antzone", 1);
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let addRequest = db.transaction(['person'], 'readwrite')
      .objectStore('person')
      .add({ id: 1, name: '螞蟻部落', age: 5, email: 'antzone@163.com' });

  addRequest.onsuccess = function (event) {
    console.log('資料寫入成功');
  };
  addRequest.onerror = function (event) {
    console.log('資料寫入失敗');
  }
}
</script>
</head>
<body>
  <p>上述程式碼建立一個名為"antzone"</p>
</body>
</html>

程式碼執行效果截圖如下:

aid[3324]

上述程式碼為物件倉庫新增了一條資料，id屬性值為1，id是主鍵。

對資料庫新增資料需要通過transaction事務完成，具體參閱IDBTransaction 事務物件一章節。

關於新增資料的add方法可以參閱IndexedDB 資料庫新增資料一章節。

前面規定新增資料的id屬性值為主鍵，如果資料中沒有合適的屬性作為主鍵，可以定義自增主鍵。

考慮到篇幅問題，更多關於物件倉庫內容不再介紹，具體可以參閱如下兩篇文章：

（1）.IndexedDB 資料庫主鍵一章節。

（2）.IndexedDB createIndex()建立索引一章節。

相關文章