Question

我试图逐个获取IndexedDB中的元素。我的目标是：

获取第一个element[key].verbo和adjetivo以及sustativo并以html格式打印，以便在网络上查看。
等待用户在包含这些单词的内容中插入一个句子，然后单击“检查”。
获取第二个element[key].verbo和adjetivo以及sustativo并以html格式打印，以便在网络上查看。
与2相同。

继续以同样的方式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>IndexedDB: Local Database with HTML5</title>
        <script type="text/javascript">
            var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
            var dataBase = null;
            var pulsador = false;
            function startDB() {

                dataBase = indexedDB.open('db', 1);

                dataBase.onupgradeneeded = function (e) {
                    var active = dataBase.result;

                    var object = active.createObjectStore("people", {keyPath: 'id', autoIncrement: true});
                    object.createIndex('by_adjetivo', 'adjetivo', {unique: false});
                    object.createIndex('by_verbo', 'verbo', {unique: true});
                };

                dataBase.onsuccess = function (e) {
                    alert('Base de datos cargada');
                    loadAll();
                };
                dataBase.onerror = function (e) {
                    alert('Error al cargar Base de datos');
                };
            }

            function add() {

                var active = dataBase.result;
                var data = active.transaction(["people"], "readwrite");
                var object = data.objectStore("people");

                var request = object.put({
                    verbo: document.querySelector("#verbo").value,
                    adjetivo: document.querySelector("#adjetivo").value,
                    sustantivo: document.querySelector("#sustantivo").value
                });

                request.onerror = function (e) {
                    alert(request.error.adjetivo + '\n\n' + request.error.message);
                };

                data.oncomplete = function (e) {
                    document.querySelector('#verbo').value = '';
                    document.querySelector('#adjetivo').value = '';
                    document.querySelector('#sustantivo').value = '';
                    alert('Object successfully added');
                    loadAll();
                };
            }

            function loadAll() {

                var active = dataBase.result;
                var data = active.transaction(["people"], "readonly");
                var object = data.objectStore("people");

                var elements = [];

                object.openCursor().onsuccess = function (e) {

                    var result = e.target.result;

                    if (result === null) {
                        return;
                    }

                    elements.push(result.value);
                    result.continue();

                };

                data.oncomplete = function () {
                    var outerHTML = '';
                    for (var key in elements) {
                        v=elements[key].verbo;

                        outerHTML+='\n\ <tr>\n\<td>' 
                             +"\t"+"Verbo: \t"+ elements[key].verbo + '</td>\n\<td>' 
                             +"\t"+"Adjetivo: \t"+ elements[key].adjetivo + '</td>\n\ <td>'
                             +"\t"+"Sustantivo: \t"+ elements[key].sustantivo 
                             + '</td>\n\ </tr>';
                        document.querySelector("#elementsList").innerHTML = outerHTML; // I want print one verbo,adjetivo and sustantivo

                        gradeTest(elements[key].verbo,elements[key].adjetivo,elements[key].sustantivo); //Before, i want 

                    }

                    elements = [];

                };

            }


            function gradeTest(p1,p2,p3) {
                var a1 = document.getElementById('q1').value.toLowerCase();
                if(a1.includes(p1) )
                    if (a1.includes(p2)) 
                        if (a1.includes(p3)) {
                            alert('They are equal');//and we can continue to two elements[key].
                }
            }

        </script>
    </head>
    <body onload="startDB();">
        <input type="text" id="verbo" placeholder="Enter verbo" />
        <input type="text" id="adjetivo" placeholder="Enter adjetivo" />
        <input type="text" id="sustantivo" placeholder="Enter sustantivo" />
        <button type="button" onclick="add();">Save</button>
        <hr>
        <div id="elements">
            <table>
                <caption>g</caption>
                <thead>
                    <tr>
                        <th>Verbo</th>
                        <th>Adjetivo</th>
                        <th>Sustantivo</th>
                    </tr>
                </thead>
                <tbody id="elementsList">
                    <tr>
                        <td colspan="3">Not elements to show</td>
                    </tr>
                </tbody>

                <tr>
                <td>introduce one verb,adjetive and sustantive</td>
                <td><input name="q1" type="text" id="q1" size="30" maxlength="30"/></td>
                </tr>
                <tr>
                <td><input name="submit" type="button" onClick="gradeTest()" value="check"/></td>
                </tr>
            </table>
        </div>

Answer 1

尝试先创建项目数组，然后使用全局变量跟踪items数组中的位置。例如：

// Declare a global variable to hold the items
var items = [];

// Open a connection and query for items
function fillItems() {
  var openRequest = indexedDB.open('mydb, 1);
  openRequest.onsuccess = onOpenConnection;
}

// Query the store for all items
function onOpenConnection(openRequestEvent) {
  if(openRequestEvent.type !== 'success' ) {
    console.log('connection error');
    return;
  }

  var connection = openRequestEvent.target.result;
  var transaction = connection.transaction('mystorename');
  var store = transaction.objectStore('mystorename');
  var request = store.openCursor();
  request.onsuccess = addNextItemFromDatabase;
}

// Add the item at the cursor's current position to the items array,
// and then request the cursor to advance by 1
function addNextItemFromDatabase(event) {
  var cursor = event.target.result;
  if(cursor) {
    items.push(cursor.value);
    cursor.continue();
  }
}

// When page is loaded, fill the items array
fillItems();
// Global variable that keeps track of index into items array
var currentItemPosition = -1;
// Get the button the user clicks
var button = document.getElementById('mybutton');
// Attach a click listener function that is called whenever the 
// button is clicked
button.onclick = function(event) {
  // Increment the current position by 1 each time the button 
  // is clicked
  currentItemPosition = currentItemPosition + 1;

  // Check if in bounds
  if(currentItemPosition >= items.length) {
    console.log('out of bounds');
    return;
  }

  // Get the item at the current position
  var currentItem = items[currentItemPosition];
  console.log(currentItem.verbo);
  console.log(currentItem.adjectivo);
  // etc..
};

如何在IndexedDB中逐个获取

1 个答案: