Lista de quehaceres. Tengo casillas de verificación y estilos agregados dinámicos para ellos en css. Quiero guardar los estilos de las casillas marcadas después de actualizar la página usando el almacenamiento local. He probado de todo pero nada funciona. ¿Algunas ideas? Gracias. (También las casillas de verificación ya están en el almacenamiento local) Aquí está el código completo https://github.com/cyber8nav/To-do-list

 function addTask(nameOfTheNewTask) { let task = { id: Date.now(), name: nameOfTheNewTask, completed: false }; tasks.push(task); textArea.value = ""; addTaskWindow.style.display = "none"; tasksWindow.style.display = "block"; if (tasks.length == 1) { amount.textContent = tasks.length + " " + "Task"; } else { amount.textContent = tasks.length + " " + "Tasks"; } renderTask(tasks); addToStorage(tasks);} function renderTask(tasks) { list.innerHTML = ""; tasks.forEach((item) => { const newTask = document.createElement("li"); newTask.setAttribute("data-key", item.id); newTask.innerHTML = ` <label class = "tasks__item"> <input type = "checkbox" class = "checkbox" name = "task"> <span>${item.name}</span> </label> <img class="delete" src="img/icons/delete.svg" alt="del" width="18px" height="20px">`; list.append(newTask); });} // checkbox &::before{ content: ''; display: inline-block; width: 1.2em; height: 1.2em; border-radius: 50%; border: 2px solid $darkgrey; position: absolute; left: 0; top: 0; } } // checked checkbox input[type=checkbox] + span::after{ content: ''; opacity: 0; transition: opacity 0.6s ease; } input[type=checkbox]:checked + span::after{ content: '✓'; color: $blue; font-weight: 900; position: absolute; left: 0.225rem; top: -0.025rem; opacity: 1; } input[type=checkbox]:checked + span{ color: $grey; text-decoration: line-through; animation: strike 1s linear; transition: color 0.6s ease-out; } input[type=checkbox]:checked + span::before { border: 2px solid $blue; transition: color 1s ease-out; }

}