É possível alterar permanentemente uma variável javascript? Como em, se eu definir a variável X e a fizer igual a 1. Então onClick de um botão muda essa variável para 2. Como posso conseguir que essa variável se mantenha em 2 na actualização da página?
Isto é possível com window.localStorage
ou window.sessionStorage
. A diferença é que sessionStorage
dura enquanto o navegador permanecer aberto, localStorage
sobrevive ao reinício do navegador. A persistência aplica-se ao sítio web entire e não apenas a uma única página do mesmo.
Quando precisar de definir uma variável que deve ser reflectida na(s) página(s) seguinte(s), utilize:
var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);
E em qualquer página (como quando a página foi carregada), obtenha-a como se a tivesse carregado:
var someVarName = localStorage.getItem("someVarKey");
.getItem()
devolverá nulo
se não houver valor armazenado, ou o valor armazenado.
Note-se que **somente valores de string*** podem ser armazenados neste armazenamento, mas isto pode ser ultrapassado utilizando JSON.stringify
e JSON.parse
. Tecnicamente, sempre que chamar .setItem()
, chamará .toString()
sobre o valor e armazená-lo-á.
MDN's DOM guia de armazenamento (linkado abaixo), tem soluções/polyfills, que acabam por cair de volta a coisas como biscoitos, se localStorage
estiver't disponível.
Seria uma má ideia utilizar uma minibiblioteca existente, ou criar a sua própria minibiblioteca, que abstraia a capacidade de guardar qualquer tipo de dados (como literalmente objectos, matrizes, etc.).
Referências:
Storage
- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/StorageTerá de utilizar o cookie para armazenar o valor através da actualização da página. Poderá utilizar qualquer uma das muitas bibliotecas de cookies baseadas em javascript para simplificar o acesso aos cookies, como esta2.
Se quiser suportar apenas html5 então pode pensar em Armazenamento api como localStorage/sessionStorage
Ex: utilizando localStorage e biblioteca de cookies
var mode = getStoredValue('myPageMode');
function buttonClick(mode) {
mode = mode;
storeValue('myPageMode', mode);
}
function storeValue(key, value) {
if (localStorage) {
localStorage.setItem(key, value);
} else {
$.cookies.set(key, value);
}
}
function getStoredValue(key) {
if (localStorage) {
return localStorage.getItem(key);
} else {
return $.cookies.get(key);
}
}