Question

我创建了一个小应用程序，允许您添加和删除待办事项列表。因为我想与其他设备共享这些数据，所以我编写了一些导出函数来将数据导出为JSON并导入它们。

但是，导入主要只导入列表中的最后一项，有时更多，但从不导入所有数据。

根据网站上的建议，我创建了一个函数，每次put成功时都会循环遍历todo列表，但它仍然没有给出所需的结果。

edu.indexedDB.importTodos = function(todos) {       
        var db = edu.indexedDB.db;      
        var transaction = db.transaction(['todo'], 'readwrite');        
        var objStore = transaction.objectStore('todo');
        var i = 0;
        putNext();      
        function putNext() {            
            if (i<todos.length) {               
                var tmpResult = eval('('+todos[i]+')');     
                var text = tmpResult.text;
                var timestamp = new Date().getTime();
                var todo = {'text': text,'timestamp': timestamp};
                console.log("adding " + text);
                objStore.put(todo).onsuccess = putNext;
                ++i;
            } else {                           
                edu.indexedDB.getAllTodoItems();
            }
        }      
    };

完整的应用基本代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style>
        a{cursor:pointer;}
    </style>
    <script>
    var todoContainer = document.getElementById("todo-container");
    var edu = {};   
    var exportObj = {};
    exportObj['todo'] = {};
    var todoArray = new Array();

    window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;

    if ('webkitIndexedDB' in window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
    }

    edu.indexedDB = {};
    edu.indexedDB.db = null;

    edu.indexedDB.onerror = function(e) {
      console.log(e);
    };

    edu.indexedDB.open = function(callback) {
        var version = 2;
        var request = indexedDB.open("edudb-dev1",version);

        request.onupgradeneeded = function(e) {
            var db = e.target.result;

            e.target.transaction.onerror = edu.indexedDB.onerror;
            //todo datastore
            if (db.objectStoreNames.contains('todo')) {
              db.deleteObjectStore('todo');
            }
            var store = db.createObjectStore('todo', {
              keyPath: 'timestamp'
            }); 
        };

        request.onsuccess = function(e) {          
            edu.indexedDB.db = e.target.result;
            var db = edu.indexedDB.db;      
            callback();
        };
        request.onerror = edu.indexedDB.onerror;
    };

    edu.indexedDB.addTodo = function(todoText) {        
        var db = edu.indexedDB.db;      
        var transaction = db.transaction(['todo'], 'readwrite');        
        var objStore = transaction.objectStore('todo');     
        var timestamp = new Date().getTime();       
        var todo = {'text': todoText,'timestamp': timestamp};       
        var request = objStore.put(todo);           
        request.onsuccess = function(e) {       
            edu.indexedDB.getAllTodoItems();        
        };
        request.onerror = function(e) {
            console.log("Error Adding: ", e);
        };
    };
    edu.indexedDB.deleteTodo = function(id) {
        var db = edu.indexedDB.db;
        var transaction = db.transaction(['todo'], 'readwrite');
        var objStore = transaction.objectStore('todo');

        var request = objStore.delete(id);

        request.onsuccess = function(e) {
            edu.indexedDB.getAllTodoItems();
        }
        request.onerror = function(e) {
            console.log(e);
        }
    };
    edu.indexedDB.getAllTodoItems = function() {
        var todos = document.getElementById("todoItems");
        todos.innerHTML = "";      
        var db = edu.indexedDB.db;
        var trans = db.transaction(["todo"], "readwrite");
        var store = trans.objectStore("todo");

        // Get everything in the store;
        var cursorRequest = store.openCursor(); 
        cursorRequest.onsuccess = function(e) {         
          var result = e.target.result;
          if(!result)
            return;
          renderTodo(result.value);
          result.continue();
        };  
        cursorRequest.onerror = edu.indexedDB.onerror;
    };
    function renderTodo(row) {  
        var todos = document.getElementById("todoItems");
        var li = document.createElement("li");
        var a = document.createElement("a");
        var t = document.createTextNode(row.text);      
        var timestamp = row.timestamp;
        a.addEventListener("click", function() {
          edu.indexedDB.deleteTodo(timestamp);
        }, false);      
        a.textContent = " [Delete]";
        li.appendChild(t);
        li.appendChild(a);
        todos.appendChild(li);
        //exportobject
        addToExport("todo",JSON.stringify(row));    
    }
    function addTodo() {
        var todo = document.getElementById("todo");     
        if(todo.value){
            edu.indexedDB.addTodo(todo.value);
            todo.value = "";
        }else{
            showNotification("Please enter a todo description.");
        }        
    }
    function init() {
        edu.indexedDB.open(refresh);        
    }

    function refresh(){
        edu.indexedDB.getAllTodoItems();
    }

    function showNotification(message){
        notification.style.display = 'block';
        notification.innerHTML = message;
    }
    function addToExport(type,row){             
        switch(type){
            case 'todo':
                todoArray.push(row);
                exportObj['todo'] = todoArray;
                break;
        }       
    }
    function showExport(){      
        document.getElementById("data").value = JSON.stringify(exportObj);
    }
    //imports
    function importData(){      
        var importData = document.getElementById("data").value;     
        var parsedJSON = eval('('+importData+')');              
        var dataTodo = parsedJSON.todo;
        edu.indexedDB.importTodos(dataTodo);
    }
    edu.indexedDB.importTodos = function(todos) {       
        var db = edu.indexedDB.db;      
        var transaction = db.transaction(['todo'], 'readwrite');        
        var objStore = transaction.objectStore('todo');
        var i = 0;
        putNext();      
        function putNext() {            
            if (i<todos.length) {               
                var tmpResult = eval('('+todos[i]+')');     
                var text = tmpResult.text;
                var timestamp = new Date().getTime();
                var todo = {'text': text,'timestamp': timestamp};
                console.log("adding " + text);
                objStore.put(todo).onsuccess = putNext;
                ++i;
            } else {                           
                edu.indexedDB.getAllTodoItems();
            }
        }      
    };
    window.addEventListener("DOMContentLoaded", init, false);
    </script>
</head>
<body>
    <nav>
        <div id="menu">
            <a id="menu-todo" class="menu-item" onclick="showContainer('todo'); return false;">TODO</a>
            <a id="menu-export" class="export-item" onclick="showExport(); return false;">export</a>
            <a id="menu-import" class="import-item" onclick="importData(); return false;">import</a>    
        </div>
    </nav>
    <div id="container">
        <!-- todo -->
        <div id="todo-container">
            <h4>Todo's</h4>
            <ul id="todoItems"></ul>
            <form id="todo-form">
                <input type="text" id="todo" name="todo" placeholder="Enter todo..." />
                <input type="submit" value="+" class="btn" onclick="addTodo(); return false;"/>
            </form>
        </div>
    </div>
    <nav>
    </nav>
    <textarea id="data" style="width:98%;height:250px;"></textarea>
    <div id="notification"></div>
    <div id="footer">&copy;</div>
</body>
</html>

Answer 1

您不必等待put成功继续，您可以循环收集并添加它们。然后，您可以通过使用事务上的完整回调来检测插入是否成功。然后，您可以启动一个新的只读事务来检索所有数据。

IndexedDB导入无法按预期工作

1 个答案: