Question

我有了简单的待办事项清单。我在从本地存储中检索数据时遇到问题。我尝试了不同的方法，但仍然给我一个错误。我遇到本地存储问题。

有人可以帮忙吗？我有了简单的待办事项清单。我在从本地存储中检索数据时遇到问题。我尝试了不同的方法，但仍然给我一个错误。我遇到本地存储问题。

有人可以帮忙吗？

//Declaring variables
    var taskInput = document.getElementById("new-task"); //Text input
    var addButton = document.getElementById("add"); //Add button
    var list = document.getElementById("todo-list"); //ToDo list
    var listItem = document.getElementsByTagName("li"); //List item

    //New task list item
    var createTaskElement = function(taskString) {
      // creating the list item
      var listItem = document.createElement('li');
      // creating the label
      var label = document.createElement('label');
      //creating the delete button
      var deleteButton = document.createElement('button');
      // modifying elements
      label.innerText = taskString;
      deleteButton.innerText = "Delete"; 
      deleteButton.className = "delete";
      deleteButton.onclick = deleteTask;
      //appending the label and the deleteButton to listItem
      listItem.appendChild(label);
      listItem.appendChild(deleteButton);
      return listItem;  
    };

    //Add a new task
    var addTask = function () {
      var listItem = createTaskElement(taskInput.value);
      list.appendChild(listItem);
      taskInput.focus();
      taskInput.select();
      saveToDoList();

    };

    //Delete a task
    var deleteTask = function() {
      var listItem = this.parentNode;
      var ul = listItem.parentNode;
      ul.removeChild(listItem);  
      saveToDoList();

    };

    var bindTaskEvents = function(taskListItem) {
      //select taskListItem's children
      var deleteButton = document.querySelector("button.delete"); //Delete button
      //bind tasks to delete button
      deleteButton.onclick = deleteTask;
    };

    //cycling over the list ul list items
      for(var i = 0; i < list.children.length; i++) {
       //bind events to list item's children
        bindTaskEvents(list.children[i])
      //
    };

    //Set the click handler to the addTask function
    addButton.onclick = addTask;


    //Save data to the local storage
    function saveToDoList() {
      var item = JSON.stringify(listItem);
      localStorage.setItem("todoList", item)

    }

    //Get data from local storage
    function getToDoList() {
      var item = localStorage.getItem("todoList")
      list = JSON.parse(item);

    }

    saveToDoList();

getToDoList();

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>ToDo App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <div class="container">
    <div id="head"> 
      <h1>ToDo List</h1>
    </div>
    <div id="list">
    <ul id="todo-list" >
      <li><label>Eat bananas</label> <button class="delete">Delete</button></li>
    </ul>
    </div>
    <div id="add-tasks">
      <input id="new-task" type="text"><button id="add">Add</button>
    </div>
  </div>
    <script src="js/app.js"></script>

  </body>


</html>

谢谢！

待办事项列表中的localStorage出现问题

0 个答案: