Javascript 待办事项列表应用推送到 array/local 存储

Question

我正在尝试将用户输入添加到数组中。我似乎无法弄清楚如何着手完成这项工作。我花了几个小时试图弄清楚到底该做什么。我也想将此 "to do list" 保存到我的本地存储中，我同样对尝试解决这两个问题感到沮丧。

任何关于如何从用户输入添加到数组的建议或指导and/or如何将其放入本地存储将不胜感激。到目前为止，我已经花了很长时间。感谢您的帮助！非常感谢。

Javascript

var theList = [];

function todoList() {
  var item = document.getElementById('todoInput').value;
  var text = document.createTextNode(item);
  var checkbox = document.createElement('input');
      checkbox.type = "checkbox";
      checkbox.name = "name";
      checkbox.value = "value";
  var newItem = document.createElement("li");

  newItem.appendChild(checkbox);
  newItem.appendChild(text);
  document.getElementById("todoList").appendChild(newItem)

  return clear();
}

function clear() {
  todoInput.value = "";
}

console.log(theList);

HTML

  <h1>To Do List:<h1>
    <input id="todoInput" type="text">
    <button type="button" onclick="todoList()">Add Item</button>
</form>
<ol id="todoList">
</ol>

<script src="todo.js"></script>

Answer 1

如果您不介意使用 jQuery，则以下内容应该足够好 - 无论哪种方式，转换为 JavaScript.

都不是很困难

这是一份 fiddle 待办事项列表 - https://jsfiddle.net/makzan/bNQ7u/

$('#add-btn').click(function(){
    // get value from #name input
    var val = $('#name').val();
    // append the name to the list
    $('#list').append("<li>" + val + "  <a href='#' class='done-btn'>Done</a> <a href='#' class='cancel-btn'>Cancel Task</a></li>");
    // reset the input field and focus it.
    $('#name').val("").focus();
});

// correct approach
$('.done-btn').live( 'click', function() {
  $(this).parent('li').addClass('done');
});    

$('.cancel-btn').live( 'click', function() {
  $(this).parent('li').fadeOut();
});

如您所见，逻辑是简单地分配在 jQuery

中处理得更简单的侦听器

Answer 2

要添加新创建的列表项，只需将 theList.push(item) 添加到您的 todoList() 函数。

要将 var theList = [] 数组保存到 localStorage，请使用：

localStorage.setItem("todoList", JSON.stringify(theList));

并使用它来检索 localStroage 对象：

var storedTodoList = JSON.parse(localStorage.getItem("todoList"));

查看下面的代码片段：

<h1>To Do List:</h1>

<input id="todoInput" type="text">
<button type="button" onclick="todoList()">Add Item</button>

<ol id="todoList">
</ol>

<script>
  var theList = [];

  function todoList() {

    var item = document.getElementById('todoInput').value;
    var text = document.createTextNode(item);
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.name = "name";
    checkbox.value = "value";
    var newItem = document.createElement("li");

    newItem.appendChild(checkbox);
    newItem.appendChild(text);
    document.getElementById("todoList").appendChild(newItem);
    
    theList.push(item); // This adds the item to theList[]
    //localStorage.setItem("todoList", JSON.stringify(theList)); // Set localStorage object
    //var storedTodoList = JSON.parse(localStorage.getItem("todoList")); // Get localStorage object

    console.log(theList);
    
    
    return clear();
  }

  function clear() {
    todoInput.value = "";
  }
  
</script>

<!-- <script src="todo.js"></script> -->

希望对您有所帮助。

Javascript 待办事项列表应用推送到 array/local 存储

Javascript To Do list app push to array/local storage

html

javascript

arrays

push

local-storage