How to properly save my input in local storage in JavaScript?-CodePudding

I am tasked with creating a to do list form . The User should be able to input their 'todos' and then be displayed those todos. The user has the option to remove and cross out each todo. When the user refreshes the page, the local storage should display the todos that the user inputed.

I am able to return all the inputs that are saved in the local storage at first try. However, once I cleared the console I realized my inputs are no longer being saved to the local storage. Every time I insert an input- the input does not save to local storage. enter image description here.

attached is the display browser.

Sorry for the sloppy code. I have just started my code learning. Any help would be appreciated !

const form = document.querySelector("form");
// const li = document.querySelector("li");
const ul = document.querySelector("#todolist");
const input = document.querySelector("#TO-DO");
let todoArray;


if (localStorage.todos) {
  todoArray = JSON.parse(localStorage.todos);
} else {
  todoArray = [];
}

for (let todo of todoArray) {
  addTodo(todo);
}

function addTodo(userInput) {
  const newToDo = document.createElement("li");

  newToDo.innerText = userInput;
  ul.appendChild(newToDo);
  newToDo.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      newToDo.classList.toggle("completed");
    }
  });
  const removeBtn = document.createElement("button");
  removeBtn.innerText = "REMOVE";
  removeBtn.addEventListener("click", function () {
    removeBtn.parentElement.remove();
    removeFromLocalStorage(userInput);
  });
  newToDo.prepend(removeBtn);
}

const userInput = input.value;

ul.addEventListener("click", function (e) {
  
  if (e.target.tagName === "BUTTON") {
    e.target.parentElement.remove();
  } else if (e.target.tagName === "LI") {
  }
});

form.addEventListener("submit", function submit(e) {
  e.preventDefault();

  const newToDo = document.createElement("li");
  const removeBtn = document.createElement("button");
  const userInput = input.value;
  

  removeBtn.innerText = "REMOVE";
  removeBtn.addEventListener("click", function () {
    removeBtn.parentElement.remove();
  });

  newToDo.innerText = userInput;
  input.value =
    ""; /* resetting the input value to be empty after we retieve value */
  ul.append(newToDo);
  newToDo.appendChild(removeBtn);
  newToDo.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      //   console.log("YOU CLICKed lI");
      newToDo.classList.toggle("completed");
    }
  });
});

function addToLocalStorage(userInput) {
  todoArray.push(userInput);
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

function removeFromLocalStorage(userInput) {
  for (let i = 0; i < todoArray.length; i  ) {
    if (todoArray[i] === userInput) {
      todoArray.splice(i, 1);
      break;
    }
  }
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

CodePudding user response：

It looks like you are not calling your addToLocalStorage(userInput) function anywhere, so that is probably why they are not being written to local storage.

Try adding addToLocalStorage(userInput) to the end of your addTodo function.

CodePudding user response：

Add string to local storage

const localString = 'abc'

localStorage.setItem('str', localString)

Get string from local storage

// gives undefined if item doesn't exist on localStorage

localStorage.getItem('str')

Add array to local storage

const localArray = ['one','two','three'] 

/* we will store this as storedItems. For this, we will have 
to first convert the array into string using JSON.stringify because we can't 
store array directly in local storage. We can only store strings in it*/

localStorage.setItem('storedItems', JSON.stringify(localArray))

Get array from local storage

// if storedItems doesn't exist then we will return empty array

JSON.parse(localStorage.getItem('storedItems') || '[]')