Javascript 待办事项列表应用程序推送到数组/本地存储答案

【问题标题】：Javascript To Do list app push to array/local storageJavascript 待办事项列表应用程序推送到数组/本地存储
【发布时间】：2017-02-22 06:57:16
【问题描述】：

我正在尝试将用户输入添加到数组中。我似乎无法弄清楚如何去做。我花了几个小时试图弄清楚到底该怎么做。我还希望将这个“待办事项列表”保存到我的本地存储中，我同样对试图找出这两个问题感到沮丧。

任何关于如何从用户输入添加到阵列和/或如何将其放入本地存储的建议或指导将不胜感激。到目前为止，我花了相当长的时间。感谢您的所有帮助！非常感谢。

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>

【问题讨论】：

你介意用 jQuery 代替 JavaScript 吗？
我还没有开始学习 jQuery，但感谢您的帖子！我将不得不通过它来做出正面/反面，但谢谢......这是一个很好的参考点！

标签： javascript html arrays local-storage push

【解决方案1】：

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

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

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

并使用它来检索 localStroage 对象：

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

参见下面的 sn-p：

<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> -->

希望这会有所帮助。

【讨论】：

帮助很大，非常感谢。我将推送放在我的外部 js 文件中的错误位置。谢谢！

【解决方案2】：

如果您不介意使用 jQuery，以下内容应该已经足够好了 - 无论哪种方式转换为 JavaScript 都不是很困难。

这里有一个待办事项列表 - 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 中处理起来更简单

【讨论】：