How do I make the Tasks that are created local storage for the browser?

Question

I am trying to make the tasks that have been created save to the user's local storage within the browser. Is it also possible to show me how to make the delete button remove the created task?

/************************************
 * creates an object of elements needed *
 ************************************/
 
 const elements = {
    form: document.querySelector("#new-task-form"),
    input: document.querySelector("#new-task-input"),
    list: document.querySelector("#tasks"),
    cal: document.querySelector("#calendar")
}

/****************************
 * Generates an ID for task *
 ****************************/

 const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`

/**********************************************
 * function that creates the HTML elements    *
 **********************************************/

 const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

    const tasks = document.createElement("div");

    tasks.innerHTML = `
    <button class = "sort">Sort</button>
    <div class="task" data-id = "${id}">
        <div class="content">
            <input type ="checkbox" class="tick">
            <input type ="text" class = "text" id = "text" value="${task}" readonly>
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = "date" id = "date">
        </div>

        <div class = "actions">
            <button class="edit" data-id="${id}">Edit</button>
            <button class="delete" data-id="${id}">Delete</button>
        </div>
    </div>
    `
    elements.list.appendChild(tasks)
    listen()
    return tasks

}


/********************************************
 * Marks tasks as complete with checkbox    *
 ********************************************/

function listen(){
    let allCheckboxes = document.querySelectorAll('.tick')
    allCheckboxes.forEach(checkbox =>{
        checkbox.addEventListener('change',(e)=>{
            let parentElem=e.target.parentElement

            if(e.target.checked){
                parentElem.style.textDecoration = "line-through"
            }
            else{
                parentElem.style.textDecoration = "none"
            }
        });
    });
}

/**************************************************************
 * Event that listens for the edit,save and delete buttons    *
 **************************************************************/
elements.list.addEventListener('click',event => {
    const {target} = event;
    const {id} = target.dataset;
    const task = id ? document.querySelector(`[data-id="${id}"]`):null;  

    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete')
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    //Checking to see if buttons are pressed

    if(task && type.edit && isFromSaveLabel){
        const text = task.querySelector('text')
        target.innerText = 'Edit'
        text.setAttribute('readonly', true)
        return
    };

    if(task && type.edit){
        const text = task.querySelector('text')
        target.innerText = 'save'
        text.removeAttribute('readonly')
        text.focus()
        return
    };

    if(task && type.delete){
        
        return
    }
    
});

/*******************************************************************
 * Submits the HTML elements to have the lists submited and created*
 *******************************************************************/

 const submitHandler = (event) =>{
    event.preventDefault();
    createTask();
}


elements.form.addEventListener("submit", submitHandler);

The end result that I would like to achieve is to make the created list local storage so that if the page refreshes the tasks remain. and having the task delete when clicking the delete button

You can find the jsfiddler here: https://jsfiddle.net/blaze92/seLvzd1h/2/

Answer 1

I Had Done The Exact Same Project In The Past My Project. So How You Can Do It Can Be Like The Following:

1. Since You Already Have A Method For Creating A Task createTask. modify this function in a way such that you can pass custom parameters. This allows you to create a method to add notes from the localstorage to your page.
2. Then You Need To Take All The Tasks get their info using document.getElementByClassName or document.getElementByID and then add it to a JSON Object/Array.
3. Then You Can Convert this JSON Object/Array Into String Using JSON.Stringify. Now You Can Store This String Into Localstorage using localStorage.setItem()
4. Now You Can Add A Event Listener To Detect Page Load and then get this String from localhost as localStorage.getItem() and then convert it back to a JSON Object.
5. Then Create A For Loop Which Iterates Through all the elements of this object/array and call the method to createTask with the parameters from the object.