domingo, 5 de febrero de 2012

Persistencia en Javascript

La persistencia ya sean de variables o de objetos es un tema, que a mas de uno ha dado problemas sobre todo para quienes empiezan en la programación web. La naturaleza de la web impide que los datos se mantengan en cuanto cambiamos de script en el caso de PHP (para este caso ya vimos una forma fácil y rápida en el post persistencia de objetos en php) y cuando cambiamos de pagina en el caso de JavaScript.

Para el caso de JavaScript que es el que veremos ahora, podemos hacer 2 cosas, la siguiente no es la forma correcta pero es fácil y rápida:

usamos la propiedad name del objeto window, ya que este objeto se mantiene, incluso cuando se recarga la pagina, excepto claro cuando cerramos el navegador. La forma de usarlo seria tan fácil como sigue:

window.name='{"variable1": valor, "variable2": valor2}';

y para acceder posteriormente usamos la siguiente sintaxis:

window.access = new function ('return ' + window.name)();
window.alert(window.access.variable1);

Ahora la segunda forma es mas eficiente, pero se tiene que saber si el navegador soporta HTML5 y el DOM Storage, con esta forma podemos incluso conservar objetos y se usa de la siguiente forma:

localStorage.set('variable1', valor);
localStorage.set('variable2', valor2);

Para acceder a las variable usamos esto:

variable1 = localStorage.get('variable1');
variable2 = localStorage.get('variable2');

Fácil ¿no? incluso se pueden almacenar objetos, pero los tenemos que serializar con JSON#stringify y JSON#parse de la siguiente forma:

var obj = new Object();
obj.variable1 = valor;
obj.variable2 = valor2;
//serializamos
objetoS = JSON.stringify(obj);
localStorage.set('objetoPersistente', objetoS);

Y para traerlo de nuevo a la vida XD, hacemos lo siguiente:

objetoS = localStorage.get('objetoPersistente');
obj = JSON.parse(objetoS);
window.alert(obj.variable1);

Bueno hasta la próxima y saludos.

1 comentario:

  1. probe el ejemplo pero no me anda la linea
    window.access = new function ('return ' + window.name)();

    te cuento yo tengo un template wordpress y quiero guardar los datos al enviar un mail con el plugin formulario de contacto 7

    entonces lo que hice fue poner un javascript pero a nivel del body porque a nivel del form no puedo

    utilizo 2 eventos onsubmit (para guardar los input) y el onreset(para hacer el insert en la base)

    lo hago asi porque cuando hace el reset me aseguro que los datos estan valiados

    quiero utilizar variables persistentes en el onsubmit y luego utilizarla en el onreset

    no se si se entiende

    muchas gracias desde ya

    ResponderEliminar