2015-05-17 51 views
0

我使用的是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> 

回答

0

你可以試試下面的方法有三個參數:

  • databaseid
  • TABLEID - 存儲名稱
  • 回調 - 函數,該函數返回所選擇的數據陣列
  • COND - 條件功能。 OK記錄返回true,其他人返回false。

下面是代碼:使用browser database API adapter和閱讀有關從its wiki page它的用法

function selectFromTable (databaseid, tableid, cb, cond) { 
    var request = window.indexedDB.open(databaseid); 
    request.onsuccess = function(event) { 
     var res = []; 
     var ixdb = event.target.result; 
     var tx = ixdb.transaction([tableid]); 
     var store = tx.objectStore(tableid); 
     var cur = store.openCursor(); 
     cur.onblocked = function(event) { 
    } 
    cur.onerror = function(event) { 
    } 
    cur.onsuccess = function(event) { 
     var cursor = event.target.result; 
     if(cursor) { 
      if(cond(cursor.value)) res.push(cursor.value); 
      cursor.continue(); 
     } else { 
      ixdb.close(); 
      cb(res); 
     } 
    } 
}  
0

嘗試。 您需要包含所有3個JS文件才能入門。