let taskList = document.getElementById("taskList"); const newItem = new Item("some value"); taskList.append(newItem.item) const updateTaskList = () => { taskList.innerHTML = ""; taskItems = JSON.parse(localStorage.getItem("tasks")); const div = document.createElement("div"); div.innerHTML = taskItems; taskItems = div.querySelectorAll("li"); taskItems.forEach((task) => { taskList.append(new Item("some value").item); }) } const updateLocal = () => { taskList = document.getElementById("taskList"); localStorage.setItem("tasks", JSON.stringify(taskList.innerHTML)); } class Item { constructor(name){ const div = document.createElement("div"); div.innerHTML = name; this.item = div; this.item.addEventListener("click", () => this.changeStyle()); } changeStyle(){ this.item.style.textDecoration = "line-through"; updateLocal(); } } document.addEventListener("DOMContentLoaded", () => { updateTaskList(); })El estilo se actualiza en el DOM, pero después de volver a cargar la página, el estilo desaparece en lugar de almacenarse localmente. ¿Cuál es el problema aquí?
Resulta que estaba creando un nuevo elemento de la Clase y no actualizando el estilo. Todo lo que tenía que hacer era pasar los estilos del almacenamiento local a la clase y actualizar los estilos para el nuevo elemento.
class Item { constructor(name, styles){ const div = document.createElement("div"); div.innerHTML = name; if(styles) div.styles.textDecoration = styles.textDecoration; this.item = div; this.item.addEventListener("click", () => this.changeStyle()); } changeStyle(){ this.item.style.textDecoration = "line-through"; updateLocal(); }}