Implementing local storage to JS todo list-CodePudding

I try to develop todo list with html&css and JS. Actually, I completed it except local storage. I saw many people who used local storage in their todo list projects, but I want to implement local storage in my codes. However, I cannot figure out how I can do that.

Thank you for taking the time.

Edit: I mean, how can I get tasks from localstorage when I refresh or even close tab?

window.addEventListener("load", () => {
const inputForm = document.querySelector("#new-form");
const newInput = document.querySelector("#input-text");
const allTask = document.querySelector(".all-task");

inputForm.addEventListener("submit", (e) => {
    e.preventDefault();

    const inputValue = newInput.value;

    if(!inputValue) return alert("Write a task")

    if(inputValue.trim() === "") return alert("Unsuccessfull attempt!")
        

    const taskDIV = document.createElement("div");
    taskDIV.classList.add("added-task")
    allTask.appendChild(taskDIV);

    const contentDIV = document.createElement("div");
    contentDIV.classList.add("new-text");
    contentDIV.innerHTML = inputValue
    taskDIV.appendChild(contentDIV);

    const removeDIV = document.createElement("div");
    removeDIV.classList.add("remove")
    taskDIV.appendChild(removeDIV)

    const removeButton = document.createElement("button");
    removeButton.classList.add("remove-button");
    removeButton.innerHTML = "X"
    removeDIV.appendChild(removeButton)

    e.target.reset();

    removeButton.addEventListener("click", () => {
        taskDIV.remove()
    })
})

})

CodePudding user response：

Local Storage stores data in the form of key value pairs where keys and values both are string.

In your case you want to store multiple todo items, for that you can create array of todo items and the store it to Local Storage in JSON format by using: JSON.stringify(arr)

Here is a goo starting point https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

CodePudding user response：

when you are storing you just need to stringify it because it stores data in key & value form (value must be a string).

let yourData

localStorage.setItem('todoList',JSON.stringify(yourData))

to get this data from local storage

let getData = JSON.parse(localStorage.getItem('todoList));