"如何显示我的 localStorage 项目中的每个元素？"

Question

i'm trying to create a simple To-do list, and my question is how do i get all elements of a single item in localStorage displayed?

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 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)
    localStorage.setItem("tasks", JSON.stringify(tasks))
    inputEl.value = ""

    newParagraph.textContent = JSON.parse(localStorageContent)

    errorMsg.textContent = ""

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

}

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

Answer 1

When you execute JSON.parse(localStorageContent)<\/strong> you convert your string into an array, that's right.

newParagraph.textContent = JSON.parse(localStorageContent)