基于IndexedDB的JavaScript待办列表日期显示异常求助

你的问题核心是没有把用户选择的日期和待办项一起存入数据库，反而在渲染每个条目时都读取当前日期输入框的数值，所以所有条目都会显示同一个日期，和添加时选择的日期无关。

下面是具体的修改步骤：

1. 修改添加逻辑，存储用户选择的日期 #

首先更新添加待办的函数，把用户选的日期也传入数据库存储：

function addTodo() {
    var todo = document.getElementById("todo");
    var datePicker = document.getElementById("date");
    // 检查是否选择了日期
    if (!datePicker.value) {
        document.getElementById("ausgabe").innerHTML = "<br/><br/> 请选择日期!";
        return;
    }
    html5rocks.indexedDB.addTodo(todo.value, datePicker.value);
    todo.value = "";
    datePicker.value = ""; // 清空日期输入框
}

然后修改数据库的添加方法，新增存储日期的字段：

html5rocks.indexedDB.addTodo = function(todoText, todoDate) {
  var db = html5rocks.indexedDB.db;
  var trans = db.transaction(["todo"], "readwrite");
  var store = trans.objectStore("todo");

  var data = 
  {
      "text": todoText,
      "timeStamp": new Date().getTime(),
      "dueDate": todoDate // 存储用户选择的日期
  };

  var request = store.put(data);

  request.onsuccess = function(e) 
  {
      html5rocks.indexedDB.getAllTodoItems();
  };

  request.onerror = function(e) 
  {
      console.log("Error Adding: ", e);
  };
};

2. 修改渲染逻辑，使用存储的日期 #

更新渲染函数，不再读取输入框的日期，而是从数据库存储的条目里取出对应日期：

function renderTodo(row) {
    // 从当前条目的数据里取出存储的日期
    const dt = new Date(row.dueDate);
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

    if(row.text.trim() == "") {
        document.getElementById("ausgabe").innerHTML = "<br/><br/> 请输入任务内容!";
    } 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";

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

3. 升级数据库版本 #

因为新增了存储字段，需要修改数据库版本号触发更新：

html5rocks.indexedDB.open = function() {
  var version = 2; // 版本号从1改为2
  var request = indexedDB.open("todos", version);

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

    e.target.transaction.onerror = html5rocks.indexedDB.onerror;

    if(db.objectStoreNames.contains("todo")) {
      db.deleteObjectStore("todo"); // 删除旧仓库，创建新的（如果需要保留旧数据，可额外做数据迁移）
    }

    var store = db.createObjectStore("todo",
      {keyPath: "timeStamp"});
  };

  // 其余代码保持不变...
};

修改完成后，每个待办项添加时都会把用户选择的日期存入数据库，渲染时直接读取对应条目的日期，就不会出现所有条目日期一致的问题了。

内容的提问来源于stack exchange，提问作者mccutter