Intento hacer una lista de tareas pero tengo dificultades con el almacenamiento local. Primero, no entiendo por qué el almacenamiento local devuelve [objeto Objeto] en lugar de texto real. En segundo lugar, en algún momento, el almacenamiento local se vacía y luego comienza a llenarse desde el principio. eso es tan confuso para mi
function addTask() { let addTaskButton = document.getElementById('add-task-button') let list = document.getElementById('task-list'); let li = document.createElement('li'); let checkbox = document.createElement('input'); let taskText = document.createElement('span'); let delButton = document.createElement('button'); let btnText = document.createTextNode('Delete task'); checkbox.type = 'checkbox'; checkbox.className = 'checkbox'; taskText.innerText = document.getElementById('input-task').value; taskText.className = 'task'; delButton.className = 'delete-btn'; delButton.addEventListener('click', deleteTask) delButton.addEventListener('click', updateStorage) addTaskButton.addEventListener('click', updateStorage); delButton.appendChild(btnText); li.appendChild(checkbox); li.appendChild(taskText); li.appendChild(delButton); list.appendChild(li); document.getElementById('input-task').value = ''; taskList.push({ text: taskText.innerText, checked: false }); } let taskList = []; function updateStorage() { localStorage.setItem('tasks', JSON.stringify(taskList)); console.log(taskList) } function deleteTask () { this.parentNode.remove(); } document.getElementById('add-task-button').addEventListener('click', addTask); function loadList() { document.querySelector('ul').innerHTML = JSON.parse(localStorage.getItem('tasks')) || []; } window.addEventListener('load', loadList);Por aquí:
const inputTask = document.querySelector('#input-task') , addTaskBt = document.querySelector('#add-task-button') , taskList = document.querySelector('#task-list') , tasks = JSON.parse(localStorage.getItem('tasks') || '[]') , savTasks =_=> localStorage.setItem('tasks',JSON.stringify(tasks)) ; tasks.forEach( newLItask ) addTaskBt.onclick =_=> { if (inputTask.value.trim()==='') return let taskElm = { txt: inputTask.value.trim(), checking:false } tasks.push( taskElm ) newLItask( taskElm ) savTasks() inputTask.value = '' inputTask.focus() } taskList.onclick = ({target}) => // event delegayion for all buttons & checkboxes { if (!target.matches('button.delete-btn, input[type=checkbox]')) return let taskIndex = tasks.findIndex(task => task===target.closest('li').ref ) if (target.matches('input[type=checkbox]')) tasks[taskIndex].checking = target.checked else // delete { tasks.splice(taskIndex,1) target.closest('li').remove() } savTasks() } function newLItask( taskElm ) { taskList .appendChild(Object.assign(document.createElement('li'), {ref:taskElm} )) .innerHTML = ` <input type="checkbox" class="checkbox" ${taskElm.checking ? 'checked': ''}> <span class="task"> ${taskElm.txt} </span> <button class="delete-btn">Delete task</button>` }para las pruebas:
#task-list { padding : 0; list-style-type : none; } #task-list li { margin : .4em 0; } #task-list li > span { display : inline-block; width : 20em; border-bottom : 1px solid lightsteelblue; margin : 0 .6em 0 0; } #task-list input[type=checkbox]:checked + span { text-decoration : line-through ; text-decoration-style : wavy; text-decoration-color : orangered; } <input type="text" id="input-task" placeholder="input task" size="26"> <button id="add-task-button" >add task</button> <ul id="task-list"></ul>Hice este comentario en la publicación original, pero creo que esto podría calificar como la respuesta ...
El JSON.Parse obtiene un objeto, y cuando intenta usar ese objeto como una cadena (estableciendo el HTML interno de un elemento), obtendrá el texto "[objeto Objeto]". Lo que está almacenado en localStorage ya es una cadena que representa su JSON. Simplemente configure el HTML interno a lo que regresa de su localStorage.getItem('tasks') .