localStorage not working properly/localStorage overwriting itself

Question

I'm attempting to create a simple to-do list and I've encountered two problems:

After refreshing the page, all the created elements are no longer visible on the page despite being in local storage.
After refreshing the page and submitting new values to the input, localStorage overwrites itself. Despite that, the items displayed from the input fields are from the previous localStorage , which no longer exists (I really hope this makes sense).

const inputEl = document.getElementById("inputEl")
const submitBtn = document.getElementById("submit")
const clearBtn = document.getElementById("clearBtn")
const todoListContainer = document.getElementById("todoList")
const taskContainer = document.querySelector(".task")
const cancelBtn = document.querySelector(".cancelBtn")
const doneBtn = document.querySelector(".doneBtn")
const errorMsg = document.querySelector(".error")

let localStorageContent = localStorage.getItem("tasks")
let tasksItem = JSON.parse(localStorageContent)
let tasks = []

function createTask() {
    if (inputEl.value.length != 0) {


        const newDiv = document.createElement("div")
        newDiv.classList.add("task")
        const newParagraph = document.createElement("p")
        const newCancelBtn = document.createElement("button")
        newCancelBtn.classList.add("cancelBtn")
        newCancelBtn.textContent = "X"
        const newDoneBtn = document.createElement("button")
        newDoneBtn.classList.add("doneBtn")
        newDoneBtn.textContent = "Done"

        todoListContainer.appendChild(newDiv)
        newDiv.appendChild(newParagraph)
        newDiv.appendChild(newCancelBtn)
        newDiv.appendChild(newDoneBtn)
        //^^ Creating a container for a new task, with all its elements and assigning the classes^^



        tasks.push(inputEl.value)
        inputEl.value = ""

        for (let i = 0; i < tasks.length; i++) {
            localStorage.setItem("tasks", JSON.stringify(tasks))
            newParagraph.textContent = JSON.parse(localStorageContent)[i]
        }

        errorMsg.textContent = ""

    } else {
        errorMsg.textContent = "You have to type something in!"
        errorMsg.classList.toggle("visibility")

    }

}

submitBtn.addEventListener("click", () => {
    createTask()
})

clearBtn.addEventListener("click", () => {
    localStorage.clear()
})

HTML code below:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="/style.css">
      <script src="/script.js" defer></script>
      <title>To-do list</title>
   </head>
   <body>
      <h2 class="error visibility"></h2>
      <div id="todoList">
         <h1>To-Do List</h1>
         <input type="text" name="" id="inputEl" placeholder="Add an item!">
         <button type="submitBtn" id="submit">Submit</button>
         <button id="clearBtn">Clear list</button>
         <div class="task">
         </div>
      </div>
   </body>
</html>

Answer 1

After refreshing the page, all the created elements are no longer visible on the page despite being in local storage
<\/blockquote>

To render the HTML for existing tasks stored in the localStorage<\/code> you have to write a code that loops over your existing tasks in the tasksItem<\/code> and applies the rendering logic to it.
        
         
<\/blockquote>
  To keep existing tasks, you have to use your tasksItem<\/code> variable instead of the blank tasks<\/code> array to create your tasks in and save them to the localStorage<\/code> .
          
         
          
         
 
        

localStorage not working properly/localStorage overwriting itself

Question

1 answers

solution1
3 ACCPTED 2022-02-06 19:40:28

localStorage not working properly/localStorage overwriting itself

Question

1 answers

solution1 3 ACCPTED 2022-02-06 19:40:28

solution1
3 ACCPTED 2022-02-06 19:40:28