IDBObjectStore.add() 方法

admin發表於2019-09-18
Object

此方法可以為indexedDB資料指定物件倉庫新增一條記錄。

add方法是一個非同步操作，返回值是IDBRequest型別物件，通過物件相關事件獲取操作狀態。

關於indexedDB資料非同步操作介紹可以參閱IndexedDB 非同步API概述一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let request = objectStore.add(value, key);

引數解析：

（1）.value：必需，將要被新增的記錄值。

（2）.key：可選，將要被新增記錄的主鍵。

程式碼例項：

[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('students')) {
    let objectStore = db.createObjectStore('students',{keyPath:"id"});
    objectStore.createIndex("xingbie","sex",{ unique: false });
  }
}

request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  let addRequest = objectStore.add({
    id:1,
    name:"螞蟻部落",
    age:20,
    sex:"男"
  });

  addRequest.onsuccess = (ev) => {
    console.log("新增成功");
  }
  addRequest.onerror = (ev) => {
    console.log("新增失敗");
  }
}
</script>
</head>
<body>
  <p>為物件倉庫新增資料</p>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201909/18/141858dirnnsinfz5h5n2z.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過add()方法為物件倉庫新增一條記錄，程式碼分析如下：

（1）.createObjectStore()方法建立一個物件倉庫，並規定記錄的主鍵為儲存物件的id屬性值。

（2）.通過add()方法將對應的物件新增到物件倉庫，可以看到記錄的主鍵為1。

特別說明：

（1）.如果儲存的資料不具有id屬性，那麼將會報錯。

（2）.如果createObjectStore()方法規定主鍵是自增長，使用方式與上述程式碼相同。

如果createObjectStore()方法沒有使用規定主鍵所在的屬性，也沒有將主鍵規定為自增長。

那麼使用add()方法新增記錄的時候，需要通過第二個引數明確規定主鍵。

程式碼例項如下：

[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('students')) {
    let objectStore = db.createObjectStore('students');
    objectStore.createIndex("xingbie","sex",{ unique: false });
  }
}

request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  let addRequest = objectStore.add({
    id:1,
    name:"螞蟻部落",
    age:20,
    sex:"男"
  },"key");

  addRequest.onsuccess = (ev) => {
    console.log("新增成功");
  }
  addRequest.onerror = (ev) => {
    console.log("新增失敗");
  }
}
</script>
</head>
<body>
  <p>為物件倉庫新增資料</p>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201909/18/142556u6avo5v0h4cy3v2v.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過add()方法第二個引數規定了記錄的主鍵。

如果createObjectStore()方法規定主鍵是自增長，也可以通過add()方法第二個引數設定主鍵。

程式碼例項如下：

[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('students')) {
    let objectStore = db.createObjectStore('students',{autoIncrement:true});
    objectStore.createIndex("xingbie","sex",{ unique: false });
  }
}

request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  let addRequest = objectStore.add({
    id:1,
    name:"螞蟻部落",
    age:20,
    sex:"男"
  },"key");

  addRequest.onsuccess = (ev) => {
    console.log("新增成功");
  }
  addRequest.onerror = (ev) => {
    console.log("新增失敗");
  }
}
</script>
</head>
<body>
  <p>為物件倉庫新增資料</p>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201909/18/143032wu14pwpvqqzwwvev.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

雖然規定是自增長，但是add()方法第二個引數規定的值優先順序更高。

當同時規定自增長和keyPath的時候，如下：

[JavaScript] 純文字檢視 複製程式碼
let objectStore = db.createObjectStore('students',{
      autoIncrement:true,
      keyPath:"id"
    });

上述情況，add()方法的第二個引數不會生效，資料新增會失敗。

相關文章