我用Javascript，HTML和IndexedDB创建了一个待办事项列表来存储数据库中的项目，这样当我刷新浏览器时，这些项目就不会被删除。我还想添加日期到项目中，但当我按下按钮添加项目时，日期总是变得与其他项目相同，但这不是它应该如何工作：
我希望日期总是因为我选择它是每一个项目。
这是我第一次在这里提问，所以我希望我的提问方式没有完全错误。以下是完整的代码，我认为问题出在renderTodo（row）-函数上，但我不确定：
<!DOCTYPE html>
<html>
<head>
<title>ToDo-List IndexedDB</title>
<script type="text/javascript">
var html5rocks = {};
window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB;
if ('webkitIndexedDB' in window)
{
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
html5rocks.indexedDB = {};
html5rocks.indexedDB.db = null;
html5rocks.indexedDB.onerror = function(e)
{
console.log(e);
};
html5rocks.indexedDB.open = function()
{
var version = 1;
var request = indexedDB.open("todos", version);
// We can only create Object stores in a versionchange transaction.
request.onupgradeneeded = function(e)
{
var db = e.target.result;
// A versionchange transaction is started automatically.
e.target.transaction.onerror = html5rocks.indexedDB.onerror;
if(db.objectStoreNames.contains("todo"))
{
db.deleteObjectStore("todo");
}
var store = db.createObjectStore("todo",
{keyPath: "timeStamp"});
};
request.onsuccess = function(e)
{
html5rocks.indexedDB.db = e.target.result;
html5rocks.indexedDB.getAllTodoItems();
};
request.onerror = html5rocks.indexedDB.onerror;
};
html5rocks.indexedDB.addTodo = function(todoText)
{
var db = html5rocks.indexedDB.db;
var trans = db.transaction(["todo"], "readwrite");
var store = trans.objectStore("todo");
var data =
{
"text": todoText,
"timeStamp": new Date().getTime()
};
var request = store.put(data);
request.onsuccess = function(e)
{
html5rocks.indexedDB.getAllTodoItems();
};
request.onerror = function(e)
{
console.log("Error Adding: ", e);
};
};
html5rocks.indexedDB.deleteTodo = function(id)
{
var db = html5rocks.indexedDB.db;
var trans = db.transaction(["todo"], "readwrite");
var store = trans.objectStore("todo");
var request = store.delete(id);
request.onsuccess = function(e)
{
html5rocks.indexedDB.getAllTodoItems();
};
request.onerror = function(e)
{
console.log("Error Adding: ", e);
};
};
html5rocks.indexedDB.getAllTodoItems = function()
{
var todos = document.getElementById("list");
todos.innerHTML = "";
var db = html5rocks.indexedDB.db;
var trans = db.transaction(["todo"], "readwrite");
var store = trans.objectStore("todo");
// Get everything in the store;
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e)
{
var result = e.target.result;
if(!!result == false)
return;
renderTodo(result.value);
result.continue();
};
cursorRequest.onerror = html5rocks.indexedDB.onerror;
};
function renderTodo(row)
{
const dt = getDatePickerDate('date');
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
if(row.text.trim() == "")
{
document.getElementById("ausgabe").innerHTML = "<br/><br/> Have to enter a task!";
}
else
{
document.getElementById("ausgabe").innerHTML = "";
var input_date = " " + dt.toLocaleDateString([], options) + ": " + row.text;
var list = document.getElementById("list");
var container = document.createElement("container");
var button = document.createElement("button");
button.type = "button";
button.innerText = "X";
var a = document.createElement("a");
button.addEventListener("click", function()
{
html5rocks.indexedDB.deleteTodo(row.timeStamp);
}, false);
container.appendChild(document.createElement("br"));
container.appendChild(document.createElement("br"));
container.appendChild(button);
container.appendChild(document.createTextNode(input_date));
container.appendChild(document.createElement("br"));
list.appendChild(container);
}
}
function getDatePickerDate(elementId)
{
const value = document.getElementById(elementId).value
const [year, month, day] = value.split('-');
return new Date(year, month - 1, day);
}
function addTodo()
{
var todo = document.getElementById("todo");
html5rocks.indexedDB.addTodo(todo.value);
todo.value = "";
}
function init()
{
html5rocks.indexedDB.open();
}
window.addEventListener("DOMContentLoaded", init, false);
</script>
</head>
<body style="background-color:#647e7f">
<h1 style="position:absolute;top:10px;left:10px;">ToDo Liste </h1>
<br /><br /><br /> <br /><br /> <br /><br /><h2>Activity:</h2><br /><br />
<textarea id="todo" name="text_input" rows="10" cols="50">
</textarea>
<br />
<input type="date" id="date">
<input type="button" value="add" id = "speichern" onclick="addTodo()" />
<br />
<p id = "ausgabe" ></p>
<container id = "list" ></container>
</body>
</html>
1条答案
按热度按时间5cnsuln71#
这是因为你的代码是同步的，每个addTodo都是顺序同步发生的
要获得不同的日期，使函数异步，等待每个事务到数据库（这将花费时间）