1

Quiero guardar en localStorage el estado de mi "dark mode", pero no logro dar con ello. La función enableDark almacena ("darkMode", "on"/"off") en localStorage (eso funciona bien) pero luego al refrescar la página no parece funcionar. El código que falla es el siguiente:


function retrieveDarkStatus(){
    if (localStorage.getItem(("darkMode")==="on")){
        darkStatus=true;
        enableDark();
    }else {
        darkStatus=false;
    }
}
retrieveDarkStatus();

La función enableDark es la siguiente y parece funcionar bien:

function enableDark(){
    body.classList.toggle("dark");
    if(darkStatus==false){
        console.log("Oh, it's getting dark..");
        darkStatus=true;
        localStorage.setItem("darkMode", "on");
    }else{
        console.log("Sun is up!");
        darkStatus=false;
        localStorage.setItem("darkMode", "off" );
    }
}

Alguno ve cual es la falta? No puedo usar jQuery, por las dudas. Gracias!

0

2 respuestas 2

4

¿Es porque haces if (localStorage.getItem("darkMode"==="on")) en vez de if (localStorage.getItem("darkMode")==="on")?

Échale un vistazo a la documentación.

UPDATE:

Aquí tienes un pequeño problema con la manera en que implementas esto, porque por ejemplo, en:

function enableDark(){
    body.classList.toggle("dark");
    if(darkStatus==false){
        console.log("Oh, it's getting dark..");
        darkStatus=true;
        localStorage.setItem("darkMode", "on");
    }else{
        console.log("Sun is up!");
        darkStatus=false;
        localStorage.setItem("darkMode", "off" );
    }
}

Estás cambiando el valor de la variable darkStatus... Pero al mismo tiempo ¿Preguntas por el valor que tiene? Mira estás tres líneas de código:

if(darkStatus==false){
        console.log("Oh, it's getting dark..");
        darkStatus=true;

Preguntas por darkstatus para saber si es falso y luego asignas la variable a true lo cuál es redundante porque siempre va a ser truee igual no estás tomando en cuenta para hacer un cambio de estilo en tu página porque estás directamente haciendo body.classList.toggle("dark");.

Yo creo que si tienes una variable para manejar el modo dark (en localStorage) deberías de cambiar esa variable por medio de la función enableDark() y podrías tener otra función para updatear el estilo del cuerpo con respecto a ese valor cuando sea necesario o esta variable cambie... Algo así:

//Usas esta función para cambiar el modo: dark o light mode
function setDark(valor) {
  localStorage.setItem("darkMode", valor ? "on" : "off");
}

//Usas esta para actualizar el estilo de tu página en base a la variable darkStatus
function updateDarkMode() {
  if (retrieveDarkStatus()) {
    console.log("Oh, it's getting dark..");
    body.classList.toggle("dark");
  } else {
    console.log("Sun is up!");
    //body.classList.toggle("light");
  }
}

//Esta función verifica el estado de tu variable guardada en memoria
function retrieveDarkStatus() {
  return localStorage.getItem(("darkMode") === "on");
}

3
  • Perdón fue un error de tipeo, está bien esa sintaxis pero igual no funciona. el 26 nov. 2020 a las 0:01
  • En ese caso te sugiero que compartas el código en dónde haces referencia a la variable darkStatus porque pareciese que el error está en como implementas el cambio al modo dark.
    – FranAcuna
    el 26 nov. 2020 a las 0:03
  • Gracias Fran, ahí agregué la función a la pregunta. el 26 nov. 2020 a las 0:08
1

El problema con el código era un paréntesis de más. Estaba escrito así:

if (localStorage.getItem((“darkMode”)==“on”)){

debería haber sido:

if (localStorage.getItem(“darkMode”)==“on”){

Gracias!

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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