Como Guardar datos en el ordenador de forma permanente con javascript

Guardar datos de forma persistente en el navegador con JavaScript

Javascript nos permite hacer toda clase de virguerías en el navegador. Podemos editar los estilos de forma dinámica, manipular variables y muchas cosas más. 

Sin embargo, el lenguaje por su cuenta tiene un inconveniente, y es que todas las variables y la información con la que trabaja está almacenada de forma volátil en la RAM, lo que quiere decir que se perderá cuando cerremos e incluso cuando actualicemos la página.

Para conseguir que los datos se mantengan independientemente de si el usuario tiene abierta o no la página, podemos recurrir a localStorage y sessionStorage. Ambos nos permiten guardar parejas de claves y valores en el disco duro del ordenador del usuario.

El valor es la información que queremos guardar y la clave es lo que nos permitirá acceder a ella. Por tanto, en la práctica es bastante semejante a un objeto de javascript.

La principal diferencia entre localStorage y sessionStorage es que la información en localStorage permanece indefinidamente guardada mientras que los datos que tengamos en sessionStorage se pierden cuando el usuario abandona nuestra aplicación. 

Puede parecer entonces que sessionStorage no sirve para nada, pero nos permite retener información sobre el usuario mientras éste visita varias páginas o secciones de nuestra aplicación. Como los datos se restablecen en cada sesión, es menos intrusivo a nivel de privacidad y nos garantiza que no vamos a llenar el disco del usuario de elementos sin usar.

La forma de acceder a ambos es la misma. Veamos cómo se hace. Abre una consola de javascript en cualquier página y copia los siguientes comandos:

//Guardamos un elemento en localStorage
localStorage.setItem("Clave", "Valor");
//Recuperamos el valor almacenado
localStorage.getItem("Clave");

Veremos que el valor sigue ahí si cerramos la página y volvemos a abrirla o si la actualizamos. Al utilizar localStorage.getItem(«Clave»), podremos recuperar el valor sin tener que definirlo de nuevo. También estará presente si cerramos por completo el navegador.

En vez de un solo valor podemos almacenar un array.

let Lista = [1, 2, 3];
localStorage.setItem("Clave", Lista);

Si utilizamos localStorage.getItem(«Clave») veremos que hemos modificado el valor asociado a nuestra clave. Al guardar valores que no sean texto, tenemos que tener cuidado, ya que automáticamente los convertirá a texto y puede que la información no conserve la estructura que esperamos. 

Ésto puede ser especialmente problemático si guardamos arrays y objetos. Para evitarlo, podemos usar el método JSON.stringify() al guardar los datos y el método JSON.parse() al recuperar los datos. Veamos un ejemplo del problema:

let Objeto = {
  TextoImportante : "Secreto",
  Entero : 23,
  Decimal : 123.456,
  Array : [1, 2, 3, 4, "Texto"]
 };
 localStorage.setItem("Clave", Objeto); 

Al utilizar localStorage.getItem(«Clave») obtenemos de vuelta un valor que no nos sirve para nada: «[object Object]». En cambio, si usamos JSON.stringify() antes de guardarlo, al recuperarlo conservará su estructura sin problemas.

Objeto = JSON.stringify(Objeto);
localStorage.setItem("Clave", Objeto);

Ahora localStorage.getItem(«Clave») nos devuelve un valor que sí contiene los datos que necesitamos, pero de todas formas tenemos el problema de que nos ha devuelto el objeto como un texto y en ésta forma no lo podemos utilizar. Para que vuelva a ser un objeto utilizamos JSON.parse().

let ObjetoRecuperado = localStorage.getItem("Clave");
ObjetoRecuperado = JSON.parse(ObjetoRecuperado);

Así conservamos los datos tal y como los creamos, y gracias a la flexibilidad de la notación de objetos de javascript podemos almacenar conjuntos de datos bastante complejos.

De todas formas ésta no es ni de lejos la mejor manera de gestionar la persistencia de los datos. Tiene algunas limitaciones importantes y nos podemos encontrar con comportamientos diferentes en varios navegadores. Además, debido al hecho de que el usuario puede borrar determinados datos de navegación, puede ser que desaparezcan sin previo aviso.

Aún con todo, es una opción interesante para proyectos personales sencillos, o para hacer rápidamente un prototipo. ¿Quieres saber más sobre este tipo de programación? Tu sitio está en un Bootcamp Full Stack.

Autor

Manuel Torres

Selección de talento en OXYGEN

Ir arriba
Abrir Chat
1
¿Necesitas ayuda?
OXYGEN Academy
¡Hola! 👋 ¿Necesitas más información?