¿Es posible cambiar permanentemente una variable javascript? Por ejemplo, si establezco la variable X y la hago igual a 1. Luego, al hacer clic en un botón, la variable cambia a 2. ¿Cómo puedo hacer que esa variable permanezca en 2 al actualizar la página?
Esto es posible con window.localStorage
o window.sessionStorage
. La diferencia es que sessionStorage
dura mientras el navegador permanece abierto, localStorage
sobrevive más allá de los reinicios del navegador. La persistencia se aplica a todo el sitio web, no sólo a una página.
Cuando necesites establecer una variable que deba reflejarse en la(s) siguiente(s) página(s), utiliza:
var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);
Y en cualquier página (como cuando la página se ha cargado), consígalo como:
var someVarName = localStorage.getItem("someVarKey");
.getItem()
devolverá null
si no hay valor almacenado, o el valor almacenado.
Tenga en cuenta que sólo se pueden almacenar valores de cadena en este almacenamiento, pero esto puede superarse utilizando JSON.stringify
y JSON.parse
. Técnicamente, cada vez que llames a .setItem()
, llamará a .toString()
sobre el valor y lo almacenará.
La guía de almacenamiento del DOM de MDN (enlazada más abajo), tiene soluciones/polipastos, que acaban recurriendo a cosas como las cookies, si localStorage
no está disponible.
No sería una mala idea utilizar una mini biblioteca existente, o crear una propia, que abstraiga la capacidad de guardar cualquier tipo de datos (como literales de objetos, matrices, etc.).
Referencias:
Storage
- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/StorageLocalStorage
- https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorageJSON
- https://developer.mozilla.org/en-US/docs/JSONTendrá que utilizar una cookie para almacenar el valor a través de la actualización de la página. Puede utilizar cualquiera de las muchas bibliotecas de cookies basadas en javascript para simplificar el acceso a las cookies, como esta
Si quieres soportar sólo html5 entonces puedes pensar en Storage api como localStorage/sessionStorage
Ejemplo: usando localStorage y cookies library
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);
}
}