How To Do Local Storage For To-do List?

I am currently working on making the to-do list app shown [here][1] work better. I have done things like change the font, but want to use Javascript cookies to make it so that the

Solution 1:

Using local storage, as it lasts longer then cookies:

// StorelocalStorage.setItem("lastname", "Smith");
// Retrievedocument.getElementById("result").innerHTML = localStorage.getItem("lastname");

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

EDIT: @MichaelMior pointed out that local storage may not last longer then cookies, but the cookies are sent with browser requests so it's unnecessary in this case.

Solution 2:

You want to store the text content, so you need to get them first

var values=[...document.getElementsByTagName("li")].map(el=>el.textContent);

Now you can store this array

localStorage.setItem("todos",values);

If the page is loaded, add it back to the page:

localStorage.getItem("todos").forEach(fumction(value){
 //create elem
 elem.textContent=value;
 });

You could also store a HTML collection, but i wouldnt, storing just the text is.much easier...

Solution 3:

Here is a quick example where I store an item and give it a name in localStorage called input. This shows how to setItem() and getItem().

Looks like this example doesn't work in the SO sandbox, so here's a codepen - http://codepen.io/anon/pen/KaNZxX

$('button').on('click',function() {
  localStorage.setItem("input", $('input').val());
  fetch();
});

functionfetch() {
  $('#storage').html(localStorage.getItem('input'));
}

fetch(); // fetch on load

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"><button>add</button><divid="storage"></div>