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>

然后听取表格submit事件：

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

这样 enter 也可以在输入字段中使用。

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

1 个答案: