indexedDB 查詢資料

admin發表於2019-07-27
Index

本章節將通過程式碼例項介紹一下indexedDB資料庫如何去查詢資料。

屬於可資料庫增刪改查操作中的一項基本操作，查詢方式很多，大致羅列如下：

（1）.indexedDB 通過主鍵查詢指定資料一章節。

（2）.indexedDB 通過索引查詢指定資料一章節。

（3）.indexedDB 遍歷資料一章節。

（4）.indexedDB 查詢滿足指定條件資料一章節。

考慮到篇幅問題，本文進隊第一種查詢方法進行詳細介紹，其他方式可以參閱對應文章。

首先看一段程式碼例項：

[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 });
    objectStore.createIndex("xingming","name",{ unique: true });
  }
}
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let odiv=document.getElementById("ant");

  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  for(let i=0;i<students.length;i++){
    objectStore.add(students[i]);
  }

  let getRequest = objectStore.get(1002);
  getRequest.onsuccess=function(ev){
    odiv.innerHTML=this.result.name;
  }
  getRequest.onerror=function(ev){
    odiv.innerHTML="讀取失敗";
  }
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201907/27/133844r6q29f88h066f98c.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.通過倉庫物件的get()方法可以獲取物件主鍵資料。

（2）.get()方法的引數是主鍵值。

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

（4）.通過監聽IDBRequest物件的success事件可以判斷讀取資料是否已經成功。

關於get方法的具體用法可以參閱IDBObjectStore.get() 方法一章節。

上述是通過物件倉庫物件的get()方法查詢指定主鍵資料，IDBIndex物件同樣具有get()方法。

關於IDBIndex物件的get()方法可以參閱indexedDB 通過索引查詢指定資料一章節。

相關文章