bemon bemon -4 years ago 85
HTML Question

Show local storage on page load/refresh in OL

I have been trying to create a To Do list and keep running into different problems. Right now I am trying to pull from the array from local storage, so when I refresh the browser it will display the To Do list. I have tried I know I need to do something along the lines of

localStorage.getItem


but I am not sure how to go about doing so. I think I need to place it into a different function and then call that different function at the end of my JavaScript. I also think I need to use a for loop for this. I think I may need to redo my current JavaScript but am not sure where to go from here.

JavaScript

var masterList = [];

function addToList(){
var task = document.getElementById('todoInput').value;
var entry = document.createElement('li'); //2
var list = document.getElementById('orderedList'); //2
entry.appendChild(document.createTextNode(task)); //2
list.appendChild(entry); //2

masterList.push(task);

localStorage.setItem('masterList', JSON.stringify(masterList));

console.log(task);
console.log(masterList);
clearInput();
}

function clearInput() {
todoInput.value = "";
}

console.log((localStorage.getItem('masterList')));


HTML

<link href="style.css" rel="stylesheet">
</head>
<body>

<h1>To Do List:<h1>

<input id="todoInput" type="text">
<button type="button" onclick="addToList()">Add Item</button>
<ol id='orderedList'></ol>

<script src="todo.js"></script>

</body>


CSS

ol li {
background: lightgray;
text-align: left;
}

ol li:nth-child(odd){
background: lightblue;
text-align: left
text: 10%;
}

input[type=text]{
width: 20%;
border: 2px solid black;
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
}

h1{
text-align: center;
}

Answer Source

You have to call a function on document load, which will get the todo list from localStorage. If it doesn't exist, the masterList will become an empty array and will be ready to store todos inside.

Note: Check if it works, because due to the cors blockage on SO I'm unable to test it.

var masterList;

window.onload = function(){
  masterList = JSON.parse(localStorage.getItem('masterList')); //get data from storage
  if (masterList !== null) { //if data exist (todos are in storage)
    masterList.forEach(function(v){ //append each element into the dom
      var task = v;
      var entry = document.createElement('li'); //2
      var list = document.getElementById('orderedList'); //2
      entry.appendChild(document.createTextNode(task)); //2
      list.appendChild(entry); //2
    })
  } else { //if nothing exist in storage, keep todos array empty
    masterList = [];
  }
}

function addToList(){
  var task = document.getElementById('todoInput').value;
  var entry = document.createElement('li'); //2
  var list = document.getElementById('orderedList'); //2
  entry.appendChild(document.createTextNode(task)); //2
  list.appendChild(entry); //2

  masterList.push(task);

  localStorage.setItem('masterList', JSON.stringify(masterList));

  console.log(task);
  console.log(masterList);
  clearInput();
 }

function clearInput() {
    todoInput.value = "";
}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download