How to use local storage in my TODO list js

Question

I'm trying to solve a task in javascript, I'm learning but don't now how to use the local storage, or how to use it in my todo list, I can add task, mark them and delete, but when I refresh the browser the task vanishes, I've been trying for days an do not find the answer haha. This is my js code:

//informacion de las fechas 

const dateNumber = document.getElementById("dateNumber");

const dateText = document.getElementById("dateText");

const dateMonth = document.getElementById("dateMonth");

const dateYear = document.getElementById("dateYear");

const placeDate = () => {

    const date = new Date();

    dateNumber.textContent = date.toLocaleString('es', { day: 'numeric' });

    dateText.textContent = date.toLocaleString('es', { weekday: 'long' });

    dateMonth.textContent = date.toLocaleString('es', { month: 'short' });

    dateYear.textContent = date.toLocaleString('es', { year: 'numeric' });

};
placeDate();

//div contenedor de las tareas

const taskListContainer = document.getElementById("taskListContainer");

const setDate = () => {

    return moment().format('MMMM,  Do,  YYYY');
};
setDate();

const addNewTask = event => {

    event.preventDefault();

    const value  = document.getElementById("taskText").value;

    if (!value) {

        alert ("Debes escribir algo para que se agregue la tarea!!!");

        return};
  
    task.classList.add ("task", "roundborder");

    task.addEventListener("click", changeTaskState)

    task.addEventListener("dblclick", function(){

    taskListContainer.removeChild(task)

    })

    task.textContent = value;

    taskListContainer.prepend(task);

    event.target.reset();

};


const changeTaskState = event => {

    event.target.classList.toggle('marked');
}

const order = () => {

    const marked = [];

    const toDo  = [];

    taskListContainer.childNodes.forEach( element => {

        element.classList.contains('marked') ? marked.push(element) : toDo.push (element)

    })

    return [...toDo, ...marked];
}

//funcion para que al darle al boton de ordenar, se marquen como realizadas
//iteramos cada elemento de los arrays en order y lo agregamos a la lista de tareas del taskListContainer

const orderedTasks = () => {

    order().forEach(element => taskListContainer.appendChild(element))
}

and my HTML:

    <h1 >Lista de tareas</h1>
    <form onsubmit="addNewTask(event)" >
        <input type="text" id="taskText" autocomplete="off" placeholder=" " class="roundBorder">
        <button type="submit" class="add-button">+</button>
        <button type="button" class="orderButton roundBorder" onclick="orderedTasks()">Ordenar</button>
     </form>
    <h4><small> 1 click = marcar, 2 click = eliminar</small> </h4>
    <div id="taskListContainer"></div>
</div>

Answer 1

So I notice you never even set anything to the local storage

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

I'd recommend this docs to find on how to interact with the localstorage api.

Or this guide: https://blog.logrocket.com/localstorage-javascript-complete-guide/

So like in add new task you say getItem from local Storage but you never set the Item to the local storage.