IDBObjectStore.put() 方法

admin發表於2019-09-18
Object

此方法可以更新物件倉庫中指定主鍵的資料，一個非同步操作。

返回值是一個返回值是IDBRequest物件。

語法結構：

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

語法解析：

（1）.item：必需，新資料，用於更新原有資料。

（2）.key：可選，將要更新資料的主鍵。

（3）.IDBRequest：返回值是一個IDBRequest 型別物件，由此可見此方法是非同步操作。

程式碼例項：

[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>為物件倉庫批量新增資料</p>
</body>
</html>

首先通過上述程式碼為資料庫新增資料，下面基本以此為基礎對put方法進行演示。

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

a:3:{s:3:\"pic\";s:43:\"portal/201907/21/163657wuxw48oebc47cwb7.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面利用IDBObjectStore.put() 方法修改第二條資料，程式碼例項如下：

[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');
  let putRequest = objectStore.put({id:1002, 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/201907/21/163721wxcamfqgvczdvcfb.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過IDBObjectStore.put()方法將資料倉儲中的第二條資料更新，程式碼分析如下：

（1）.上述程式碼中，put方法只需要一個方法即可確定要更新的資料。

（2）.因為資料的主鍵通過keyPath規定，是內鍵，儲存的資料內部包含。

（3）.如果上述程式碼強行規定第二個引數為1002，那麼會報錯。

（4）.通過返回值物件的success和error事件可以監聽更新是否成功。

下面看一下新增第二個引數的情況，程式碼例項如下：

[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',{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>為物件倉庫批量新增資料</p>
</body>
</html>

還是批量新增資料，但是和第一段程式碼唯一不同點是，主鍵是自增長的。

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

a:3:{s:3:\"pic\";s:43:\"portal/201907/21/163749yzbu5egllb9marjf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面通過IDBObjectStore.put()方法更新第二條資料，程式碼例項如下：

[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',{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 putRequest = objectStore.put({id:1002, name:'螞蟻部落', age:5, email:'ant@163.com'},2);
  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/201907/21/163817vb5faxyfwvb11y5f.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼中因為主鍵是自增長的，資料外來鍵，資料內並不存在，所以需要通過第二個引數指定。

[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',{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 putRequest = objectStore.put({id:1002, name:'螞蟻部落', age:5, email:'ant@163.com'},6);
  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/201907/21/163847dibry7z5kij0zk00.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果要更新的資料不存在，那麼增加對應的資料。

上述程式碼本意是更新主鍵為6的資料，但是原來資料庫不存在此資料，所以就新增此資料。

相關文章