1

Quando clica no botão ele muda o background da tag BODY, preciso que quando recarregar a página ele mantem a cor que ficou selecionada antes, acho que com localstorage funcione mas não entendo muita coisa disso.

function mudarNome3(){   
 var element = document.body;  element.classList.toggle("dark-mode");
 
 if(document.getElementById("buttonmodoclaro").value == "MODO CLARO")
 {
  document.getElementById("buttonmodoclaro").value = "MODO ESCURO";
 } 
 else
 {
  document.getElementById("buttonmodoclaro").value = "MODO CLARO";
 }
}
.dark-mode {
  background-color: black;
  color: white;
}

.dark-mode #buttonmodoclaro {
    color: white;
    font-weight: bold;
    border: 1px solid #a0a0a0;
    box-shadow: 0 0 4px 0 #8e8e8e inset;
}

#buttonmodoclaro{
    
    padding: 6px;
    border: 1px solid #561010;
    border-radius: 6px;
    margin-left: 21px;
    cursor: pointer;
    box-shadow: 0 0 6px 0 #171717 inset;
    color: red;
    background: none;
    font-variant: all-small-caps;
    font-family: sans-serif;
    font-size: 14px;
}
<input type='button' id='buttonmodoclaro' onclick='mudarNome3();' value='MODO CLARO'>

1 Resposta 1

1

O localStorage realmente pode lhe atender, você precisaria salvar o valor atual nele, ou seja, sempre que o botão for clicado e recuperar assim que a página for carregada.


Seu JS ficaria mais ou menos da seguinte forma:

function restauraSalvo() {
  //Recupero o valor salvo no localStorage
  let valorSalvo = localStorage.getItem("dark-mode");

  //Se existir valor e for diferente do atual, troco...
  if (valorSalvo && valorSalvo !== document.getElementById("buttonmodoclaro").value)
  {
    mudarNome3();
  }
}

function mudarNome3(){   
  var element = document.body;

  element.classList.toggle("dark-mode");

  const botaoModo = document.getElementById("buttonmodoclaro");

  if(botaoModo.value == "MODO CLARO")
  {
    botaoModo.value = "MODO ESCURO";
  } 
  else
  {
    botaoModo.value = "MODO CLARO";
  }

  //Após efetuar a troca, salvo no localStorage
  localStorage.setItem("dark-mode", botaoModo.value);
}

restauraSalvo();

A função restauraSalvo é invocada assim que a página é carregada e com isso traz o valor salvo no localStorage e atualiza para o mesmo caso seja necessário.

Já a função mudarNome3 passa a salvar o valor atual no localStorage sempre é acionada.

Veja online: https://repl.it/repls/PresentLustrousDesigner

Obs: O localStorage não funciona no stacksnippets, por isso coloquei o exemplo em uma outra página.


Documentação: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

1
  • Ficou do jeito que eu queria, 100%, obrigado! 17/04/2020 às 15:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .