CODEWITHSUNDEEP
javascripthtml
user7070724
user7070724

Reputation:

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 user's to-dos are properly saved and still there when the page is reopened.

All I need now (which I can't seem to get the idea of how to do) is the part where 1. the browser saves the data and 2. where the browser retrieves the data.

Any help would be greatly appreciated.

<body>
        <!--To-Do Header, where you add tasks-->
        <div id="myDIV" class="header">
            <!--Change one: Make to-do list name different-->
            <h2>To-Do</h2>
            <input type="text" id="myInput" placeholder="Title..." style="padding-bottom: 20px;">
            <span onclick="newElement();" class="addBtn">Add</span>
        </div>
        <!--To-do list-->
        <ul id="myUL">

        </ul>


var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
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";
  };
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something to create a task.");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").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";
    };
  }
}

Upvotes: 0

Views: 5742

Answers (3)

Josh
Josh

Reputation: 725

Using local storage, as it lasts longer then cookies:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.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.

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53674

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();
});

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

fetch(); // fetch on load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"> <button>add</button>

<div id="storage"></div>

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138267

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...

Upvotes: 1

Related Questions