如何使用indexdb中的Clause中的条件用于浏览器

时间:2015-05-17 14:50:18

标签: javascript html sql indexeddb

我正在使用indexdb,因为它支持所有浏览器。我已成功添加数据并从indexdb获取数据但我想使用where子句条件。就像我有产品名称,病原体,疾病,路线所以我想获得数据,其中产品名称是阿里和疾病是皮肤。他们从不同的网站获得了它所显示的所有记录,包括两个输入字段中提供的值的开始和结束。

这是我正在使用的代码。

     <!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>

2 个答案:

答案 0 :(得分:0)

您可以使用三个参数尝试以下过程:

  • databaseid
  • tableid - 存储名称
  • callback - function,返回所选数据的数组
  • cond - 条件函数。对于ok记录返回true,对其他记录返回false。

以下是代码:

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);
        }
    }
}       

答案 1 :(得分:0)

尝试使用browser database API adapter并从its wiki page了解其用法。 您需要包含所有3个JS文件才能开始使用。