Warum funktioniert mein lokaler Speicher nicht?

Question

Ich habe eine einfache Aufgabenliste mit localStorage versucht, aber es funktioniert nicht. Irgendeine Idee warum? Manchmal, wenn ich weg navigiere und Objekte, die ich hinzugefügt habe, wieder erscheinen, frage ich mich, ob es eine einfache Einstellung in meinem Browser (Chrome und Safari) ist.

function get_todos() { 
    var todos = new Array; 
    var todos_str = localStorage.getItem('todo'); 
    if (todos_str !== null) { 
     todos = JSON.parse(todos_str); 
    } 
    return todos; 
} 


function add() { 
    var task = document.getElementById('task').value; 
    var todos = get_todos(); 
    var newTask = { 
        name:task, 
        id: "item" + todos.length, 
        priority: { 
           isPriority:false, 
           color:"" 
           } 
       }; 

    todos.push(newTask); 
    localStorage.setItem('todo', JSON.stringify(todos)); 

    show(); 

    return false; 
} 


function remove() { 
    var id = this.getAttribute('id'); 
    var todos = get_todos(); 
    todos.splice(id, 1); 
    localStorage.setItem('todo', JSON.stringify(todos)); 

    show(); 

    return false; 
} 

function priority() { 
    var id = this.getAttribute('value'); 
    var todos = get_todos(); 

    for (var i=0;i<todos.length;i++) { 
    var todo = todos[i]; 
    console.log(todo); 
    if (todo.id==id) { 
     todo.priority.isPriority = true; 
     todo.priority.color = "red"; 
    } 
    } 

    localStorage.setItem('todo', JSON.stringify(todos)); 

    show(); 

    return false; 
} 

function show() { 
    var todos = get_todos(); 

    var html = '<p>'; 
    for (var i = 0; i < todos.length; i++) { 
    var todo = todos[i]; 
    html += "<p id='item" + i + "' isPriority='" + todo.priority.isPriority + "'>" + todo["name"] + '<p>' + "<button class='remove'>Delete</button>" + " " + "<button class='priority' value='item" + i + "'>Priority</button>"; 
    }; 


    document.getElementById('item').innerHTML = html; 

     var button1 = document.getElementsByClassName('priority'); 
     for (var i=0; i < button1.length; i++) { 
      button1[i].addEventListener('click', priority); 
     }; 

     var button2 = document.getElementsByClassName('remove'); 
     for (var i=0; i < button2.length; i++) { 
      button2[i].addEventListener('click', remove); 
     }; 
} 


document.getElementById('add').addEventListener('keyup', add); 
show(); 

http://codepen.io/kiddigit/pen/PzZgMQ

Answer 1

Ihr Problem ist, dass Sie keyup statt click auf die Schaltfläche verbindlich sind:

document.getElementById('add').addEventListener('click', add); 

Sie betrachten könnte die Eingabe und Schaltfläche in einer Form Verpackung:

<form id="add_form"> 
    <input id="task" type="text"> 
    <button id="add" type="submit">Add</button> 
</form> 

Und dann zuhören sagte für ms submit Ereignis:

document.getElementById('add_form').addEventListener('submit', function(event) { 
    event.preventDefault(); 
    add(); 
}); 

Auf diese Weise eingeben als auch in dem Eingabefeld arbeiten.