Como o HTTP não tem estado, toda vez que você carregar a página, ele usará os valores iniciais de tudo o que você configurou em JavaScript. Você não pode definir uma variável global em JS e simplesmente manter esse valor após carregar a página novamente.
Existem algumas maneiras de armazenar o valor em outro lugar para que você possa inicializá-lo no carregamento usando JavaScript
String de consulta
Ao enviar um formulário usando o GETmétodo, o url é atualizado com uma string de consulta ( ?parameter=value&something=42). Você pode utilizar isso definindo um campo de entrada no formulário com um determinado valor. Este seria o exemplo mais simples:
<form method="GET">
<input type="hidden" name="clicked" value="true" />
<input type="submit" />
</form>
No carregamento inicial da página, nenhuma string de consulta é definida. Ao enviar este formulário, a combinação namee valueda entrada são passadas na string de consulta como clicked=true. Portanto, quando a página for carregada novamente com essa string de consulta, você poderá verificar se o botão foi clicado.
Para ler esses dados, você pode usar o seguinte script no carregamento da página:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var clicked = getParameterByName('clicked');
( Fonte )
A capacidade de usar isso depende de como seu formulário funciona atualmente. Se você já usa um POST, isso pode ser problemático.
Além disso, para conjuntos de dados maiores, isso é menos do que ideal. Passar uma string não é grande coisa, mas para arrays e objetos de dados, você provavelmente deve usar o Web Storage ou cookies. Embora os detalhes difiram um pouco entre os navegadores, o limite prático para o comprimento do URI é de cerca de 2.000 caracteres
Armazenamento web
Com a introdução do HTML5, também obtivemos o Web Storage, que permite salvar informações no navegador durante o carregamento da página. Existe o localStorageque pode salvar dados por um período mais longo (desde que o usuário não os apague manualmente) e sessionStorageque salva os dados apenas durante a sua sessão de navegação atual. O último é útil para você aqui, porque você não deseja manter "clicado" definido como verdadeiro quando o usuário voltar mais tarde.
Aqui eu defino o armazenamento no evento de clique do botão, mas você também pode vinculá-lo ao envio de formulário ou qualquer outra coisa.
$('input[type="submit"][value="Search"]').click(function() {
sessionStorage.setItem('clicked', 'true');
});
Então, ao carregar a página, você pode verificar se ela está definida usando o seguinte:
var clicked = sessionStorage.getItem('clicked');
Mesmo que esse valor seja salvo apenas durante esta sessão de navegação, pode ser possível que você queira redefini-lo antes. Para fazer isso, use:
sessionStorage.removeItem('clicked');
Se você deseja salvar um objeto JS ou array, deve convertê-lo em uma string. De acordo com as especificações, deve ser possível salvar outros tipos de dados, mas isso ainda não foi implementado corretamente nos navegadores.
//set
localStorage.setItem('myObject', JSON.stringify(myObject));
//get
var myObject = JSON.parse(localStorage.getItem('myObject'));
O suporte do navegador é muito bom, então você deve estar seguro para usá-lo, a menos que precise suportar navegadores realmente antigos / obscuros. O armazenamento na Web é o futuro.
Biscoitos
Uma alternativa ao Web Storage é salvar os dados em um cookie. Os cookies são feitos principalmente para ler dados do lado do servidor, mas também podem ser usados para dados puramente do lado do cliente.
Você já usa jQuery, o que torna a configuração de cookies bastante fácil. Novamente, eu uso o clickevento aqui, mas poderia ser usado em qualquer lugar.
$('input[type="submit"][value="Search"]').click(function() {
$.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});
Então, no carregamento da página, você pode ler o cookie assim:
var clicked = $.cookie('clicked');
Como os cookies persistem em todas as sessões no seu caso, você precisará removê-los assim que fizer o que for necessário com eles. Você não gostaria que o usuário voltasse um dia depois e ainda tivesse clickeddefinido como verdadeiro.
if(clicked === "true") {
//doYourStuff();
$.cookie('clicked', null);
}
(uma maneira não jQuery de definir / ler cookies pode ser encontrada aqui )
Eu pessoalmente não usaria um cookie para algo simples como lembrar um estado clicado, mas se a string de consulta não for uma opção e você precisar oferecer suporte a navegadores realmente antigos que não oferecem suporte a sessionStorage, isso funcionará. Você deve implementar isso com uma verificação de sessionStorage primeiro, e somente se isso falhar, use o método de cookie.
window.name
Embora isso pareça um hack para mim que provavelmente se originou antes de localStorage / sessionStorage, você pode armazenar informações na window.namepropriedade:
window.name = "my value"
Ele só pode armazenar strings, portanto, se você quiser salvar um objeto, terá de transformá-lo em string como no localStorageexemplo acima :
window.name = JSON.stringify({ clicked: true });
A principal diferença é que essas informações são retidas não apenas nas atualizações de página, mas também em diferentes domínios. No entanto, é restrito à guia atual em que você está.
Isso significa que você pode salvar algumas informações em sua página e, enquanto o usuário permanecer nessa guia, poderá acessar essas mesmas informações mesmo que ele navegue para outro site e volte. Em geral, eu desaconselho o uso disso, a menos que você realmente precise armazenar informações entre domínios durante uma única sessão de navegação.