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";
};
}
}