为什么我的本地存储不起作用？

Question

我试图用localStorage做一个简单的待办事项列表，但它不起作用。任何想法为什么？有时，当我浏览并返回已添加的项目时，我想知道这是否是我的浏览器（Chrome和Safari）上的简单设置。

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

你的问题是，你是在按钮结合的keyup代替click：

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

你可能会考虑包装的形式输入和按钮：

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

然后听听说MS submit事件：

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

这样进入将在输入字段中正常工作。