indexedDB 遍歷資料

admin發表於2019-07-27
Index

本章節介紹一下indexedDB資料庫如何遍歷資料。

實現遍歷功能要藉助於指標，下面通過程式碼例項詳細進行一下介紹。

一.不借助索引：

下面是一段簡單程式碼例項它通過指標遍歷物件倉庫中的資料。

並且將每一條資料的name屬性值寫入展示出來：

[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 cursorRequest = objectStore.openCursor();
  let str="";

  cursorRequest.onsuccess= (ev) =>{
    let cursor = ev.target.result;
    if (cursor){
      str = str + "姓名:"+cursor.value.name+"<br/>";
      cursor.continue();
    }
    odiv.innerHTML = str;
  }
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

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

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

程式碼分析如下：

（1）.關於指標更多知識參閱IDBCursor物件一章節。

（2）.通過物件倉庫的openCursor()方法可以建立一個指標物件，此方法是非同步的，返回IDBRequest物件。

（3）.通過IDBRequest物件的success事件監聽指標物件是否建立成功。

（4）.如果建立成功，ev.target.result可以獲取一個IDBCursorWithValue型別資料，繼承自IDBCursor。

（5）.IDBCursorWithValue與IDBCursor型別資料相比，多了一個value屬性，值是當前指標指向資料值。

（6）.ontinue()將指標移向下一個資料記錄，如果不存在那麼游標指向null，存在則再一次觸發success事件。

如果想要對遍歷操作進行更加精細的控制可以參閱如下兩篇文章：

（1）.indexedDB 查詢指定區間資料一章節。

（2）.IDBKeyRange 物件一章節。

二.基於索引：

利用索引可以更加便利的檢索資料，假設以性別進行檢索。

看如下程式碼例項：

[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 cursorRequest = objectStore.openCursor();
  let str="";


  let IDBIndexSex = objectStore.index("xingbie");
  let getRequest=IDBIndexSex.openCursor(IDBKeyRange.only("女"))

  getRequest.onsuccess=function(ev){
    let cursor = ev.target.result;
    if (cursor){
      str = str + "姓名:"+cursor.value.name+"<br/>";
      cursor.continue();
    }
    odiv.innerHTML = str;
  }
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

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

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

上述程式碼利用索引、指標和IDBKeyRange物件實現了對性別為"女"的學生的檢索。

原理大致與不借助索引方式是一直的，無非一個是基於主鍵，一個是基於索引。

基於索引可以認為資料是以對應的索引值進行排序，圖示如下：

aid[3440]

然後再利用索引值進行過濾檢索資料，比較簡單的操作。

相關文章