我使用的是indexdb,因爲它支持所有的瀏覽器。我已成功添加數據並從indexdb獲取數據,但我想使用where子句條件。就像我有產品名稱,病原體,疾病,路線,所以我想要得到的數據,產品名稱可以說是阿里和疾病是皮膚。他們的方式我從不同的網站得到的,它顯示了所有記錄的開始和結束兩個輸入字段中提供的值。如何使用條件像在indexdb中的條款在瀏覽器
這是我正在使用的代碼。
<!doctype html>
<html>
<head>
</head>
<body>
<script>
var db;
function indexedDBOk() {
return "indexedDB" in window;
}
document.addEventListener("DOMContentLoaded", function() {
//No support? Go in the corner and pout.
if(!indexedDBOk) return;
var openRequest = indexedDB.open("products",1);
//var openRequest = indexedDB.open("idarticle_people5",1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains("products")) {
var os = thisDB.createObjectStore("products", {autoIncrement:true});
//I want to get by name later
os.createIndex("name", "name", {unique:false});
//I want email to be unique
os.createIndex("pathogen", "pathogen", {unique:false});
os.createIndex("disease", "disease", {unique:false});
os.createIndex("route", "route", {unique:false});
}
}
openRequest.onsuccess = function(e) {
db = e.target.result;
//Listen for add clicks
document.querySelector("#addButton").addEventListener("click", addPerson, false);
//Listen for get clicks
document.querySelector("#getButton").addEventListener("click", getPerson, false);
}
openRequest.onerror = function(e) {
//Do something for the error
}
},false);
function addPerson(e) {
var name = document.querySelector("#name").value;
var pathogen = document.querySelector("#pathogen").value;
var disease = document.querySelector("#disease").value;
var route = document.querySelector("#route").value;
console.log("About to add "+name+"/"+pathogen);
//Get a transaction
//default for OS list is all, default for type is read
var transaction = db.transaction(["products"],"readwrite");
//Ask for the objectStore
var store = transaction.objectStore("products");
//Define a person
var person = {
name:name,
pathogen:pathogen,
disease:disease,
route:route
}
//Perform the add
var request = store.add(person);
request.onerror = function(e) {
alert("Sorry, that email address already exists.");
console.log("Error",e.target.error.name);
console.dir(e.target);
//some type of error handler
}
request.onsuccess = function(e) {
console.log("Woot! Did it");
}
}
function getPerson(e) {
var name = document.querySelector(「#nameSearch」).value;
var endname = document.querySelector("#diseaseSearch").value;
if(name == "" && endname == "") return;
var transaction = db.transaction(["products"],"readonly");
var store = transaction.objectStore("products");
var index = store.index("name");
//Make the range depending on what type we are doing
var range;
if(name != "" && endname != "") {
range = IDBKeyRange.bound(name, endname);
} else if(name == "") {
range = IDBKeyRange.upperBound(endname);
} else {
range = IDBKeyRange.lowerBound(name);
}
var s = "";
index.openCursor(range).onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
s += "<h2>Key "+cursor.key+"</h2><p>";
for(var field in cursor.value) {
s+= field+"="+cursor.value[field]+"<br/>";
}
s+="</p>";
cursor.continue();
}
document.querySelector("#status").innerHTML = s;
}
}
</script>
<input type="text" id="name" placeholder="Name"><br/>
<input type="text" id="pathogen" placeholder="Pathogen"><br/>
<input type="text" id="disease" placeholder="Disease"><br/>
<input type="text" id="route" placeholder="Route"><br/>
<button id="addButton">Add Data</button>
<p/>
<input type="text" id="nameSearch" placeholder="Name"><br/>
<input type="text" id="diseaseSearch" placeholder="Disease"><br/>
<button id="getButton">Get By Name</button>
<p/>
<div id="status"></div>
</body>
</html>