1

Eu consegui fazer um código que altera a cor da minha navbar com HTML e JavaScript, porém quando a pessoa atualiza a página a cor da navbar volta a normal, como eu posso utilizar o localStorage para salvar esse dado, até o usuário trocar novamente a cor da navbar? Segue o código do botão que eu criei:

<div class="container p-4">
  <h1>Selecione uma cor:</h1>
  <button type="button" name="button" class="btn btn-primary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'blue'">Azul</button>
  <button type="button" name="button" class="btn btn-success col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'green'">Verde</button>
  <button type="button" name="button" class="btn btn-dark col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'black'">Preto</button>
  <button type="button" name="button" class="btn btn-warning col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'orange'">Laranja</button>
  <button type="button" name="button" class="btn btn-secondary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'grey'">Cinza</button>
  <button type="button" name="button" class="btn btn-danger col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'red'">Vermelho</button>
</div>

A minha dúvida é, como eu salvo esses dados do button com o localStorage e como eu carrego esses dados do localStorage no meu sistema?

0

1 Resposta 1

2

Em vez de usar o atributo onclick em cada um dos botões, crie um event handler onclick em todos eles e coloque em cada um um dataset com o nome da cor. Por exemplo:

data-cor="blue"

Esse atributo será buscado no evento e salvo no localStorage. Quando você recarregar a página, basta verificar se o localStorage existe e aplicar a cor salva nele no navbar.

Os botões devem ficar desta forma abaixo. Repare no atributo data-cor em cada um:

<button type="button" name="button" class="btn btn-primary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="blue">Azul</button>
<button type="button" name="button" class="btn btn-success col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="green">Verde</button>
<button type="button" name="button" class="btn btn-dark col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="black">Preto</button>
<button type="button" name="button" class="btn btn-warning col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="orange">Laranja</button>
<button type="button" name="button" class="btn btn-secondary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="grey">Cinza</button>
<button type="button" name="button" class="btn btn-danger col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="red">Vermelho</button>

E o JavaScript ficará assim:

document.addEventListener("DOMContentLoaded", function(){
   // seleciona todos os botões pelo atributo "name"
   var bts = document.querySelectorAll("[name=button]");
   // percorre todos os botões
   for(var botao of bts){
      // cria o event handler
      botao.onclick = function(){
         // pega o valor do dataset
         var c = this.dataset.cor;
         // aplica no navbar
         document.getElementById('navbar').style.background = c;
         // salva a cor no LS
         localStorage.setItem("cor", c);
      }
   }

   // aqui verifica o localStorage
   var ls = localStorage.getItem("cor");
   if(ls){
      document.getElementById('navbar').style.background = ls;
   }

});

Obs.: o script só vai funcionar se apenas esse botões possuem o name "button". Se tiver outro botão fora dessa coleção com o mesmo name e ele for clicado, vai bugar o localStorage.

13
  • Sam, muito obrigado, você esclareceu totalmente minha dúvida! porém vou mais além, caso eu deseje fazer isso com uma div também, eu incluiria algo aqui: document.getElementById('navbar').style.background = c; ou eu teria que fazer de outro modo? para aplicar a cor na navbar e em uma div 24/07/2019 às 14:26
  • Blz, amigo. Saiba como agradecer no tour. Abs!
    – Meu ovo
    24/07/2019 às 14:27
  • Já dei o voto, se puder me ajudar com a dúvida que coloquei a cima, eu agradeço 24/07/2019 às 14:29
  • Vc pode pegar pelo id da div, se ela tiver. Algo como: document.getElementById('id da div').style.background = c;
    – Meu ovo
    24/07/2019 às 14:31
  • Entendi, mais eu colocaria a baixo document.getElementById('navbar').style.background = c; ? no caso ficaria document.getElementById('navbar').style.background = c; document.getElementById('minhadiv').style.background = c; 24/07/2019 às 14:40

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