您的位置:首页> HTML5教程> indexedDB

indexedDB 查询数据

2019-7-27 13:37| 作者: admin| 查看: 370| 评论: 0|来自: 蚂蚁部落

本章节将通过代码实例介绍一下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 通过索引查询指定数据一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部