Javascript To To list app push to array/local storage

Question

Я пытаюсь добавить пользовательский ввод в массив. Я не могу понять, как это сделать. Я потратил часы, пытаясь понять, что делать. Я также хотел бы, чтобы этот «список дел» сохранялся в моем локальном хранилище, я также разочарован попыткой выяснить обе эти проблемы.

Любые советы или рекомендации по добавлению массива из пользовательского ввода и/или как его помещать в локальное хранилище. Мне потребовалось некоторое время, чтобы даже дойти до этого. Спасибо за вашу помощь! Очень ценится.

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

Для добавления нового созданный элемент списка, просто добавьте 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> -->

Надеюсь, это поможет.

Answer 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