Primero debe obtener datos de localStorage. En el siguiente ejemplo, uso una matriz de datos porque no puedo usar en Stackoverflow el almacenamiento local. Luego itere la matriz y cree para cada fila un nuevo elemento de lista y agréguelo a su lista de tareas pendientes.
ejemplo de trabajo
const form = document.querySelector("form"); const input = document.querySelector("#input"); const list = document.querySelector("ul"); const data = ["task 1", "task 2"]; function init() { data.forEach(e => { let li = document.createElement('li'); li.innerHTML = e; const delBtn = document.createElement("button"); delBtn.innerText = 'x' li.append(' ',delBtn); list.append(li) }) } init(); /// form.addEventListener("submit", function(e) { e.preventDefault(); toDoLine(); input.value = ""; }); list.addEventListener('click', function(e){ if (e.target.nodeName === 'BUTTON') { e.target.closest('LI').remove(); } }) function toDoLine() { if (input.value !== '') { const toDo = input.value; const newLi = document.createElement("li"); newLi.innerText = toDo; const delBtn = document.createElement("button"); delBtn.innerText = 'x' newLi.append(' ', delBtn); list.append(newLi); } else { alert('add something to the list!') } }
body { text-align: center; } #list { display: inline-block; } li { text-align: left; }
<h1>To Do List</h1> <div> <form> <input action ='/test' id="input" type="text" placeholder="task"> <button id='submit'>submit</button> </form> </div> <div id='listdiv'> <ul id="list"></ul> </div>