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資料庫中的主鍵概念與關係型資料中的主鍵大同小異，用於唯一標識對應的資料。

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

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

二.程式碼例項：

[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.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('person')) {
    let objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}

request.onsuccess = (ev) => {
  // code
}
</script>
</head>
<body>
  <p>上述程式碼建立一個名為"antzone"</p>
</body>
</html>

上述程式碼會建立一個物件倉庫，程式碼執行效果截圖如下：

aid[3323]

程式碼分析如下：

（1）.createObjectStore方法建立物件倉庫需要在upgradeneeded事件處理函式中進行。

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

（3）.如果資料庫已經存在，需要修改版本號以觸發upgradeneeded事件再建立對應物件倉庫。

（4）.嘗試建立同名物件倉庫會報錯，比如我們將版本值改為2，如果物件倉庫已經存在，再去建立同名倉庫就會報錯，所以upgradeneeded事件處理函式應首先判斷是否已經存在對應名稱的物件倉庫。

（5）.通過{ 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是主鍵。

物件倉庫可以儲存的資料型別：

在前面的程式碼中，為物件倉庫新增的資料都是物件，其實值型別的資料也可以新增。

看如下程式碼例項如下：

[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.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('website')) {
    let objectStore = db.createObjectStore('website',{autoIncrement:true});
  }
}
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['website'], 'readwrite');

  transaction.oncomplete = function (event) {
    console.log('事務完成');
  };
  transaction.onerror = function (event) {
    console.log('事務錯誤資訊: ' + transaction.error);
  };

  let objectStore = transaction.objectStore('website');
  let objectStoreRequest = objectStore.add("螞蟻部落");

  objectStoreRequest.onsuccess = function (event) {
    console.log('資料新增成功');
  };
}
</script>
</head>
<body>
  <p>為物件倉庫新增字串</p>
</body>
</html>

上述程式碼為物件倉庫新增了一個字串"螞蟻部落"。

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

a:3:{s:3:\"pic\";s:43:\"portal/201907/15/124152oo01qozordaclo8a.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

除能夠儲存物件和字串，還能儲存數字、Date, Object, Arra, File, Blob, ImageData或二進位制等型別。

但不能儲存函式和Symbol型別資料。

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

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

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

為了便於資料的檢索，可以建立索引，考慮到篇幅，具體參閱如下兩篇文章：

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

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

相關文章