0

Tengo una web que tiene 2 temas una es el modo dark y otra el modo light. Todo los cambios me guardan, puedo refrescar la página con localStorage y mantener los cambios, pero me falta 2 imágenes (logotipo-dark/logotipo-light) momentáneamente estoy usando las rutas absolutas de las imágenes para al momento de darle click a un boton esta imagen cambie y al darle otro click regrese (modo dark y light) ahora me falta guardar estos cambios en cache usando las mismas rutas absolutas para que no se borren al darle refrescar a la página.

/* ================  Logo light and dark ================ */
let imagenLogo = "dark";

function miFuncion() {
  var logotipo = document.getElementById("logo-imagen");
  if (imagenLogo == "dark") {
    logotipo.src = "https://xn--robertio-j3a.com/img/logos/logo-light.png";
    imagenLogo = "light";
  } else {
    logotipo.src = "https://xn--robertio-j3a.com/img/logos/logo-dark.png";
    imagenLogo = "dark";
  }
}

/====== HTML =======/

<!--  HTML - style switcher start  -->
  <div class="style-switcher outer-shadow">
    <div onclick="miFuncion();" class="day-night s-icon outer-shadow hover-in-shadow">
      <i class="fas"></i>
    </div>
    <div class="style-switcher-toggler s-icon outer-shadow hover-in-shadow">
      <i class="fas fa-cog fa-spin"></i>
    </div>
  </div>
  <!--  style switcher end  -->
   
1
  • tu codigo tiene las respuestas que buscas es solo cuestion de analisis.... si copias y pegas si analizar suceden estos problemas...
    – Bryro
    Commented el 11 mar. 2021 a las 14:29

2 respuestas 2

0

esta seria mi forma de hacerlo; he usado sessionStorage para que solo se guarde mientras el navegador este abierto: PD: Esta es la primera vez que respondo en Stackoverflow, espero te sea de ayuda :)

//Esperamos a que la pagina este completamente cargada
    window.addEventListener('load',() => {
        var logotipo = document.getElementById('logo-imagen');
        var image_storage = window.sessionStorage; //Obtenemos el sessionStorage
        //Comprobamos si ya existe algun tema guardado en el sessionStorage y si existe usamos ese tema
        if (image_storage.getItem('theme')){
            logotipo.src = image_storage.getItem('theme_url');
        }
        //Le he puesto un id al boton para añadirle un listener (me parece mejor asi para no tener codigo javascript dentro del html)
        var boton = document.getElementById('boton');
        boton.addEventListener('click', () => {
            //Validamos el tema, si esta en dark al hacer click se hara light y viceversa
            if (image_storage.getItem('theme') == 'dark'){
                logotipo.src = 'https://xn--robertio-j3a.com/img/logos/logo-light.png';
                image_storage.setItem('theme_url','https://xn--robertio-j3a.com/img/logos/logo-light.png');
                image_storage.setItem('theme','light');
            }else{
                logotipo.src = 'https://xn--robertio-j3a.com/img/logos/logo-dark.png';
                image_storage.setItem('theme_url','https://xn--robertio-j3a.com/img/logos/logo-dark.png');
                image_storage.setItem('theme','dark');
            }
        });
    });
3
  • Gracias! yo también soy nuevo, creo que ya cargo pero mi hosting tiene problemas se cae por ratos pero ya me apareció el mensaje de mi atributo alt, supongo que en un rato ya no aparecerá ese mensaje y cargara la imagen como debe de ser. Si no me carga te paso la voz hehe saludos y muchas gracias.
    – robermejia
    Commented el 11 mar. 2021 a las 17:08
  • Hola disculpa las molestias como podría hacer para que se guarde aunque se cierre la ventana y se vuelva abrir la misma pagina. cambio solo esta linea? por localStorage en vez de sessionStorage? var image_storage = window.sessionStorage; //Obtenemos el sessionStorage
    – robermejia
    Commented el 11 mar. 2021 a las 20:44
  • Si, bastaria con eso.
    – Krengifo
    Commented el 11 mar. 2021 a las 20:57
0

Para acceder a elementos guardados en el almacenamiento del navegador puedes usar el comando:

localStorage.getItem('Ejemplo');

Si quisieras grabar el valor puedes usar:

localStorage.setItem('Ejemplo','imagendeejemplo.png')

Recuerda que localStorage se almacena en el navegador del cliente, esto puede ser peligroso si interactúa con el código de tu web ya que pueden inyectar código en tu sitio.

Además debes tener en cuenta que no todos los navegadores soportan localStorage por lo que sería importante que tu script comprobase que soportan esa función antes de ejecutarla.

Si quisieras que tu visitante solo conservase los códigos mientras tiene el navegador abierto y no siempre que entre también puedes usar sessionStorage que a diferencia de localStorage, borra su memoria cuando se cierra el navegador.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.