Local Storage

prukse10 · March 20, 2017

Hello everyone,

I am a bit of a novice so this may be an easy question that I can't figure out, but I am trying to include local storage in the code below. It is for a to do list but I want it to be able to store the changes made (entries added, removed, etc.). I looked at the local storage examples but I just cant figure it out. Any help would be appreciated. Thanks!

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-width: 250px;
}

* {
box-sizing: border-box;
}

ul {
margin: 0;
padding: 0;
}

ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

ul li:nth-child(odd) {
background: #f9f9f9;
}

ul li:hover {
background: #ddd;
}

ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}

ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}

.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px
}

.close:hover {
background-color: #f44336;
color: white;
}

.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
}

.header:after {
content: "";
display: table;
clear: both;
}

input {
border: none;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}

.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}

.addBtn:hover {
background-color: #bbb;
}
</style>
</head>
<body>

<ul id="myUL">
<li>Hit the gym</li>
<li class="checked">Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
<li>Read a book</li>
<li>Organize office</li>
</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.appendChild(span);
}

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close.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("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} 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.onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
}
}
</script>

</body>
</html>

davej · March 20, 2017

Is this your code or just some code example that you copied from somewhere?

I would suggest that you begin with a simpler example of using local storage.

https://www.w3schools.com/html/html5_webstorage.asp

Sign In

Local Storage

Recommended Posts

prukse10

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity