javascript - I need to add local storage to my to do list and I'm clueless

Question

I am working on a to do list for a final project in school. I have the list itself set up and working but I forgot to add local storage so that when the page is refreshed it keeps the values that the user set up, like deleting list items or adding new ones. 1) I don't know where in my code to insert it and 2) I don't know the format, like "this variable that I already used goes here" type thing. I pasted the code to codepen and it can be found here: https://codepen.io/otterspawdesign/pen/bJXaYm this is the javascript:

var listitems = document.getElementsByTagName("li");
var i;
for (i = 0; i < listitems.length; i++) {
  var span = document.createElement("span");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  listitems[i].appendChild(span);
}

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'li') {
    ev.target.classList.toggle('checked');
  }
}, false);

function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("typefield").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("Type an item to add to your list.");
  } else {
    document.getElementById("thelist").appendChild(li);
  }
  document.getElementById("typefield").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }

}

I'm on a tight deadline (tonight at midnight) so if someone can explain it to me like I'm 5 years old and provide me with code and tell me how it works, i mean step by step, I will be so so grateful.

标签： javascriptlocal-storage

Answer 1

var Todos = JSON.parse(localStorage.getItem('todos')) || [];

for (var i = 0; i < Todos.length; i++) {
  newElementFromLocalStorage(Todos[i])
}

This is the trick. The first line of code needs to go at the top of your javascript. It returns either an array of the todos from your localstorage or an empty array when the localstorage is empty (first load). The for loop will then perform a function on all these todo's.

The only thing you need to do (pun intended) is write the newElementFromLocalStorage function. A function that takes a string, and creates a new element from it.

Todos.push(newTodo);

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

These lines of code need to be included in the newElement function. The first line pushes a new todo to the todo's array (or the empty array, which will then become the todo's). The second line of code sets the localstorage to the new 'state' with the newly added todo.

In these lines of code the newTodo variable is not declared, that's something you need to do (oh yes, another one). It should just be the string you read from the input.

I realize this is a schoolproject, but I do want to mention that for an actual application like this you wouldn't use local storage, you would connect a database. Hope this helps! Good luck!