How to set localStorage in Javascript

Question

This is a to do list program. I want to save my to do list page when the page is refreshed. All the css and other functions work properly. I think my mistake is using the wrong variable within the store function My current attempt still isn't working. The attempt is at the end of the script. What did I do wrong?

  var inputItem = document.getElementById("inputItem"); inputItem.focus(); function addItem(list, input) { var inputItem = this.inputItem; var list = document.getElementById(list); var listItem = document.createElement("li"); var deleteButton = document.createElement("button"); deleteButton.innerText = "X"; deleteButton.addEventListener("click", function() { this.parentElement.style.display = 'none'; }); var checkBox = document.createElement("input"); checkBox.id = "check"; checkBox.type = 'checkbox'; checkBox.addEventListener('change', function() { labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none'; }); var label = document.createElement("label"); var labelText = document.createElement("span"); labelText.innerText = input.value; label.appendChild(checkBox); label.appendChild(labelText); listItem.appendChild(label); listItem.appendChild(deleteButton); list.appendChild(listItem); inputItem.focus(); inputItem.select(); return false; } function store() { var html = listItem.innerHTML; localStorage.setItem("page", html); } function retrieve() { var html = localStorage.getItem("page"); listItem.innerHTML = html; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <h1 align="center"> To-Do List </h1> <body> <div id="outerDiv"> <form onsubmit="return addItem('list', this.inputItem)"> <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task"> <input id="submit" type="submit"> </form> </div> <div id="innerDiv"> <ul id="list"></ul> </div> </body> </html>

Answer 1

I think you have to store only value instead of whole html.

var inputItem = document.getElementById("inputItem");
inputItem.focus();
function addItem(list, value, onLoad) {
  var inputItem = this.inputItem;
  var list = document.getElementById(list);
  var listItem = document.createElement("li");
  var deleteButton = document.createElement("button");
  deleteButton.innerText = "X";
  deleteButton.addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
  var checkBox = document.createElement("input");
  checkBox.id = "check";
  checkBox.type = 'checkbox';
  checkBox.addEventListener('change', function() {
    labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
  });
  var label = document.createElement("label");
  var labelText = document.createElement("span");
  labelText.innerText = value;
  label.appendChild(checkBox);
  label.appendChild(labelText);
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);
  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
  if(!onLoad) {
    this.store(value);
  }
  return false;
}
function store(value) {
  var list = localStorage.getItem("list");
  if(list) {
    list = list.split(",");
    list.push(value);                 ;
  } else {
    list = [value];
  }
  localStorage.setItem("list", list.toString());
}
window.onload = function() {
  var list = localStorage.getItem("list");
  if(list) {
    list = list.split(",");
    list.forEach(function(li){
      this.addItem("list", li, true);
    },this);
  }
}

And You have to change your html

<form onsubmit="return addItem('list', this.inputItem.value)">
      <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
      <input id="submit" type="submit">
    </form>

How to set localStorage in Javascript

Question

1 answers

solution1
0 2018-06-18 06:31:07

How to set localStorage in Javascript

Question

1 answers

solution1 0 2018-06-18 06:31:07

solution1
0 2018-06-18 06:31:07