¿Qué agrego a mi archivo HTML y JS para guardar los valores en el almacenamiento local, y leerlos y cargarlos desde el almacenamiento local para que se llenen en la lista automáticamente y agreguen un botón claro para borrar el almacenamiento local?
let addToDoButton = document.getElementById('addToDo'); let toDoContainer = document.getElementById('toDoContainer'); let inputField = document.getElementById('inputField'); addToDoButton.addEventListener('click', function(){ var paragraph = document.createElement('p'); paragraph.classList.add('paragraph-styling'); paragraph.innerText = inputField.value; toDoContainer.appendChild(paragraph); inputField.value = ""; paragraph.addEventListener('click', function(){ paragraph.style.textDecoration = "line-through"; paragraph.style.color = "red"; }) paragraph.addEventListener('dblclick', function(){ toDoContainer.removeChild(paragraph); }) }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>To Do List</title> </head> <body> <label><h1>To Do List</h1></label> <div class="container"> <input id="inputField" type="text" name="todo" id="todo"> <button id="addToDo">+</button> <div class="to-dos" id="toDoContainer"> </div> </div> <script src="main.js"></script> </body> </html>Prueba esto
Por alguna razón, el fragmento no funciona. Consulte un ejemplo de trabajo aquí https://jsfiddle.net/rkhsxw0p/
let toDoContainer = document.getElementById('toDoContainer'); let inputField = document.getElementById('inputField'); let todos = JSON.parse(localStorage.getItem('todos') ?? '[]'); function addTodos(){ toDoContainer.innerHTML = todos.map((todo, index) => { return `<p class="${todo.done ? 'done' : ''}" data-index="${index}"> ${todo.title} <button>x</button> </p>` }).join(''); } document.getElementById('add-todo-form').addEventListener('submit', event => { event.preventDefault(); let title = inputField.value.trim(); if( title ){ todos.push({ title: title, done: false }); inputField.value = ""; localStorage.setItem('todos', JSON.stringify(todos)); addTodos(); } }); toDoContainer.addEventListener('click', event => { if( event.target.tagName === 'P' ){ let index = event.target.dataset.index; todos[index].done = !todos[index].done; }else if( event.target.tagName === 'BUTTON' ){ let index = event.target.parentElement.dataset.index; todos.splice(index, 1); } localStorage.setItem('todos', JSON.stringify(todos)); addTodos(); }) // load saved todo addTodos(); .done { color: red; text-decoration: line-through; } <div class="container"> <form id="add-todo-form" autocomplete="off"> <input type="text" id="inputField"> <button type="submit">+</button> </form> <div class="to-dos" id="toDoContainer"></div> </div>