CODEWITHSUNDEEP
javascriptlocal-storage
Chris
Chris

Reputation: 113

Why does my localstorage not work?

I've attempted a simple to-do list with localStorage, but it's not working. Any idea why? Sometimes when I navigate away and come back items I've added appear, so I'm wondering if it's a simple setting on my browser (Chrome and 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

Upvotes: 0

Views: 275

Answers (1)

Andreas Louv
Andreas Louv

Reputation: 47099

Your problem is that you are binding keyup instead of click on the button:

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

You might consider wrapping the input and button in a form:

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

And then listen to said forms submit event:

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

This way enter will work in the input field as well.

Upvotes: 2

Related Questions