Tengo un ícono favorito en cada tarjeta (carrusel de gifs) que se muestra y se oculta al hacer clic en un botón. Y necesito que si los usuarios hacen clic, el ícono favorito permanezca activo incluso si la página se actualiza. Me guío desde esta pregunta para mostrar la pantalla: ninguno div después de actualizar , pero mi código es un poco diferente (Vanilla JS y literales de plantilla):
Sección que crea la plantilla para cada tarjeta
const loadData = (data) => { let trendSection = document.querySelector('.card-container') let content = '' for (let i = 0; i < data.length; i++) { content += ` <img class="image-card" src="${data[i].images.downsized.url}"> <div class="custom-overlay-icons"> <a type="button"><img class="image_on" src="assets/images/icon-fav.svg" onClick="likeCard('${[i]}')"><img id="fav-active${[i]}" src="assets/images/icon-fav-active.svg"></a> //The display of fav-active img is none by default in CSS </div>` } trendSection.innerHTML = content }Sección para obtener el icono para cambiar al hacer clic
window.likeCard = (index) => { let image = document.getElementById('fav-active' + i) if (!image.style.display || image.style.display === 'none') { image.style.display = 'block' localStorage.setItem('show'); } else { image.style.display = 'none' localStorage.removeItem('show'); } }Finalmente, el problema es que no sé cómo y dónde implementar la función que verifica el estado en Carga como lo plantean en la solución si necesito la variable de índice, obtuve estos:
window.onload = function(i) { let show = localStorage.getItem('show'); if(show === 'true'){ document.getElementById('fav-active' + i).style.display = "block"; } }No sé si fui claro, pero avísame si algo no tiene sentido.
Desde el MDN :
El método setItem() de la interfaz de almacenamiento, cuando se le pasa un nombre de clave y un valor, agregará esa clave al objeto de almacenamiento dado o actualizará el valor de esa clave si ya existe.
La sintaxis:
almacenamiento.setItem(nombreClave, ValorClave);
Está intentando almacenar la variable show en localStorage, pero no le pasó ningún keyValue . por lo tanto, en el controlador de eventos onload , la variable show no está undefined .
configure el elemento show correctamente en el controlador de eventos likeCard :
if (!image.style.display || image.style.display === 'none') { image.style.display = 'block' localStorage.setItem('show', true); // or false as your desire } else { image.style.display = 'none' localStorage.removeItem('show', false); // or true as your desire } dado que el resultado de let show = localStorage.getItem('show') es solo booleano (verdadero/falso), puede eliminar la comparación del bloque if en el controlador de onload :
window.onload = function(event) { let show = localStorage.getItem('show'); if(show) { // ------> if (true) / if(false) document.getElementById('fav-active').style.display = "block"; } }