Hola, tengo un proyecto en el que se muestra onclick of a grid advent windows. Quiero guardar los abiertos de la sesión anterior. Estoy usando el almacenamiento local guardando el div HTML (hijo de la clase de contenedor). Cuando invoco la función, detiene la apertura de otras ventanas. Todo el HTML dentro del contenedor es generado por JS.
const calendarContainer = document.querySelector(".container"); const calendarDays = 24; const d = new Date(); const todaysDate = d.getDate(); const todaysDatePlusOne = todaysDate + 1; const openDoor = (path, event) => { const dayClicked = event.target.innerHTML; if (dayClicked < todaysDatePlusOne) { event.target.parentNode.style.backgroundImage = `url(${path})`; //binds calendar door click listener event.target.style.opacity = "0"; event.target.style.backgroundColor = "#521751"; } else { //modal pop up with Giff const modal = document.getElementById("myModal"); modal.style.display = "block"; setTimeout(function() { modal.style.display = "none"; }, 2250); return; } let calendarHTML = calendarContainer.innerHTML; // Save the HTML to localStorage to keep doors open on next session localStorage.setItem("doorsOpenedPreviously", calendarHTML); }; const createCalendar = () => { for (let i = 0; i < calendarDays; i++) { const calendarDoor = document.createElement("div"); const calendarDoorText = document.createElement("div"); calendarDoor.classList.add("image"); calendarDoor.style.gridArea = "door" + (i + 1); calendarContainer.appendChild(calendarDoor); calendarDoorText.classList.add("text"); calendarDoorText.innerHTML = i + 1; calendarDoor.appendChild(calendarDoorText); adventWindowNumber = i + 1; let adventPath = `/Images/xmas-images/xmas-${adventWindowNumber}.jpg`; calendarDoorText.addEventListener("click", openDoor.bind(null, adventPath)); } }; const loadPreviousOpenedDoor = () => { // Check for saved wishlist items let saved = localStorage.getItem("doorsOpenedPreviously"); calendarContainer.innerHTML = saved; }; createCalendar(); loadPreviousOpenedDoor(); <h1>Xmas Advent Calendar 2021</h1> <div class="container"></div> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Too early Heidi!!</p> <iframe src="https://giphy.com/embed/LIhO05Vq0d9XqDg2tw" width="480" height="269" frameborder="0" class="giphy-embed" allowfullscreen></iframe> </div> </div> <script src="app.js"></script>