IDBObjectStore.put() 方法

admin發表於2019-09-18
Object

put()方法可以更新indexedDB資料庫中已經存在的指定資料。

如果被更新的資料不存在，那麼久新增指定資料，效果與add()相同。

語法結構：

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

引數解析：

（1）.item：必需，規定記錄新的值。

（2）.key：可選，將要被個更新記錄的主鍵，也就是主鍵值為key的記錄將要被更新。

（3）.request：方法的返回值是IDBRequest型別物件，put方法是一個非同步操作，通過相關事件獲取操作狀態。

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

如果感覺上面的概念陳述沒有讓您完全明晰方法的功能，不用擔心，下面將會通過程式碼例項詳細介紹。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let students=[
  { 
    id:1001, 
    name:"張三", 
    age:21,
    sex:"男"
  },{ 
    id:1002, 
    name:"李四", 
    age:20,
    sex:"女"
  },{ 
    id:1003, 
    name:"王五", 
    age:19,
    sex:"女"
  }
];

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');
  for(let i=0;i<students.length;i++){
    objectStore.add(students[i]);
  }
}
</script>
</head>
<body>
  <p>indexedDB資料庫批量增加資料</p>
</body>
</html>

程式碼可以為指定物件倉庫新增三條記錄，執行效果截圖如下：

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

下面利用put()方法修改其中的一條記錄，程式碼例項如下：

[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 transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');

  let putRequest = objectStore.put({
    id:1003, 
    name:'螞蟻部落', 
    age:5, 
    email:'ant@163.com'
  });
  
  putRequest.onsuccess = function (event) {
    console.log('資料更新成功');
  };
 
  putRequest.onerror = function (event) {
    console.log('資料更新失敗');
  }
}
</script>
</head>
<body>
  <p>indexedDB資料庫修改指定資料</p>
</body>
</html>

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

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

程式碼分析如下：

（1）.更新一條記錄，那麼首先就要確定此條記錄，通過主鍵可以實現。

（2）.上述程式碼更新記錄的主鍵值是1003，所以會修改第三條記錄。

假設我們要修改主鍵值是1009的記錄，但是物件倉庫中並沒有此條記錄，那麼就會新增此記錄。

方法的返回值是一個IDBRequest型別物件，通過監聽此物件的相關事件可以獲取相關的狀態。

程式碼例項如下：

[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 transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');

  let putRequest = objectStore.put({
    id:1009, 
    name:'螞蟻部落', 
    age:5, 
    email:'ant@163.com'
  });
  putRequest.onsuccess = function (event) {
    console.log('資料更新成功');
  };
 
  putRequest.onerror = function (event) {
    console.log('資料更新失敗');
  }
}
</script>
</head>
<body>
  <p>put()方法有時會新增資料</p>
</body>
</html>

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

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

程式碼分析如下：

（1）.本意是要更新主鍵值為1009的記錄，但是原本並不存在。

（2）.那麼此時就會新增一條主鍵值是1009的記錄。

前面的程式碼例項中，put()方法只有一個引數，下面再來看具有兩個引數的情況。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
let students=[
  { 
    name:"張三", 
    age:21,
    sex:"男"
  },{ 
    name:"李四", 
    age:20,
    sex:"女"
  },{ 
    name:"王五", 
    age:19,
    sex:"女"
  }
];

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');
  for(let i=0;i<students.length;i++){
    objectStore.add(students[i]);
  }
}

</script>
</head>
<body>
  <p>indexedDB資料庫批量增加資料，主鍵自增長</p>
</body>
</html>

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

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

上述程式碼為物件倉庫新增三條記錄，需要注意的是，主鍵是自增長的。

put()方法的第二個引數是主鍵值，對主鍵是自增長的記錄有效，看如下程式碼例項：

[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 transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');

  let putRequest = objectStore.put({
    name:'螞蟻部落', 
    age:5, 
    email:'ant@163.com'
  },1);
  putRequest.onsuccess = function (event) {
    console.log('資料更新成功');
  };
 
  putRequest.onerror = function (event) {
    console.log('資料更新失敗');
  }
}
</script>
</head>
<body>
  <p>indexedDB資料庫修改指定資料</p>
</body>
</html>

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

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

程式碼分析如下：

（1）.put()方法規定第二個引數為1。

（2）.那麼此方法目的是要更新主鍵值為1的記錄。

（3）.於是物件倉庫中的第一條記錄被修改。

特別說明：第二個引數只會對主鍵自增長的記錄有效。

如果第二個引數規定的主鍵值在物件倉庫中原本不存在，那麼就會新增對應資料，不再演示。

相關文章