1

O código abaixo faz o seguinte: Quando clico no botão Mostrar Botão um outro botão aparece, porém, vamos supor que eu clique F5, o botão desaparece.

Que ferramenta eu poderia usar para que isso não acontecesse e o botão ficasse ali mesmo após o F5 ou até eu criar outro botão para escondê-lo novamente?

function mostrarBt() {
  document.getElementById("botao1").style.display="block";
}
button#botao1 {display: none; margin-top: 5px;}
<button id="mostrar" onClick="javascript: mostrarBt();">Mostrar Botão</button>
<button id="botao1">Botão 1</button>

1
  • bote tudo isso dentro de uma div, dê um id á ela e use document.getElementById(id_da_div).innerHTML. Use o innerHTML
    – isaque
    Commented 3/10/2017 às 19:35

2 Respostas 2

4

Existem muitas maneiras de se fazer isso, a mais correta seria armazenar a escolha do usuario no banco de dados, dessa forma sempre que o usuario atualiza-se, ele teria a pagina da maneira que escolheu (com o botão nesse exemplo).

Outra forma, seria utilizando localStorage, um exemplo bem simples de como fazer isso.

if(!localStorage.button){
  document.getElementById('outButton').style.display = 'none'
}else{
  document.getElementById('outButton').style.display = 'block'
}

   
document.getElementById('show').onclick = function(){
    document.getElementById('outButton').style.display = 'block'
    localStorage.button = true
}
#outButton{
  display: none;
}
<button id="show">Mostrar Outro Botão</button>

<button id="outButton">MEU OUTRO BOTAO</button>

Lembrando que você não vai conseguir testar no Sandbox, mas pode testar nesse link

1
  • Obrigado, nunca usei localStorage, mas vou ir testando aqui as possibilidades
    – MrVanDaime
    Commented 3/10/2017 às 19:44
1

Use localStorage para guardar informações no navegador e depois usá-las:

Exemplo no JSFiddle:

CSS:

button#botao1 {display: none; margin-top: 5px;}
#esconder{ display: none; margin-top: 5px; }

HTML:

<button id="mostrar" onClick="javascript: mostrarBt();">Mostrar Botão</button>
<button id="esconder" onClick="javascript: escondeBt();">Esconder Botão</button>
<button id="botao1">Botão 1</button>

JS:

window.onload = function(){
    if(localStorage.mostrabotao2){
        mostrarBt();
    }

}

function mostrarBt() {
  document.getElementById("botao1").style.display="block";
  document.getElementById("esconder").style.display="block";
  localStorage.mostrabotao2 = 1;
}

function escondeBt() {
  document.getElementById("botao1").style.display="none";
  document.getElementById("esconder").style.display="none";
  localStorage.clear();
}

O código acima salva a informação "1" (pode ser qualquer informação, o importante é que o localStorage tenha algum valor, até mesmo um true -- localStorage.mostrabotao2 = true;) no localStorage e verifica se ele possui valor toda vez que a página é carregada. Se existe valor, o botão é exibido, se não, não faz nada e o botão continua oculto pelo CSS.

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 .