簡體   English   中英

如何使用條件,例如瀏覽器在indexdb中的子句

[英]How to use condition like where Clause in indexdb for browsers

我正在使用indexdb,因為它支持所有瀏覽器。 我已經成功添加數據並從indexdb獲取數據,但是我想使用where子句條件。 就像我有產品名稱,病原體,疾病,路線一樣,所以我想獲取產品名稱為Ali和Disease是Skin的數據。 他們的方式是我從不同的站點得到的結果是,它以兩個輸入字段中提供的值開頭和結尾顯示所有記錄。

這是我正在使用的代碼。

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

您可以使用以下三個參數嘗試以下過程:

  • 數據庫ID
  • tableid-存儲名稱
  • callback-函數,返回選定數據的數組
  • cond-條件函數。 對於正常記錄,返回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);
        }
    }
}       

嘗試使用瀏覽器數據庫API適配器,從其Wiki頁面中了解其用法。 您需要包括所有3個JS文件才能上手。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM