Persistencia de Datos en Javascript (LocalStorage)

Hay un momento en nuestro aprendizaje en el sendero de Javascript, donde nos paramos a pensar: Todos estos datos se borran cuando refresco la página, me gustaría empezar a guardarlos / persistirlos.

Entonces, escuchamos sobre bases de datos y pensamos que debemos implementar un engine como MySQL, MongoDB. Es difícil porque nos tenemos que involucrar con tecnologías de servidor como NodeJS, y si bien es un gran avance, nos desvía del foco inicial porque tenemos que invertir muchas horas en aprender conceptos nuevos para aplicar un propósito tan simple como la persistencia de ese objeto persona que va a morir en el siguiente F5.

Pero podemos manejarlo!

No vamos a engañar a nadie, usar bases de datos es la mejor forma y más segura de persistir información. Pero tenemos una alternativa mas sencilla y rápida llamada LocalStorage.

La implementación es muy sencilla, y vamos a ir desde lo mas simple como una variable hasta lo mas complejo como un JSON Object.

Guardar un String

Supongamos que queremos guardar una entidad persona. Nos centramos en su nombre, el cual metemos en una variable:

var name = "Maxi";

Luego debemos elegir un valor clave, por ejemplo “person” y guardar dicho string en nuestro LocalStorage. Lo hacemos de la siguiente manera:

localStorage.setItem("person", name);

Si nosotros ejecutamos nuestro script y abrimos la consola de Chrome (Control + Shift + I), y luego nos vamos a la pestaña Application > Storage > LocalStorage, nos vamos a encontrar con lo siguiente:

Con esto confirmamos que el valor fue guardado, y aunque eliminemos las lineas de código del localStorage, el valor va a continuar ahi hasta que limpiemos cache del navegador. Pero como lo obtenemos para utilizarlo en otro lado, como por ejemplo mostrarlo en consola? Muy simple:

var name = localStorage.getItem("person");

Si nunca guardamos “person” en LocalStorage, entonces getItem() nos devolverá undefined, por lo cual podríamos condicionarlo:

var name;

if(localStorage.getItem("person")){
    name = localStorage.getItem("person");
} else {
    name = "No soy una persona";
}

Luego para mostrar el valor almacenado, es tan simple como usar un console log:

console.log(name);

Guardar un Array

Si consideramos que estamos guardando un nombre de persona, quizá tengamos que guardar una lista de nombres. Para ello utilizaremos un array de la siguiente manera:

var names = ["Maxi", "Tomas", "Val"];
localStorage.setItem("persons", names);

Luego para poder obtenerlo, lo iteramos:

var names = localStorage.getItem("persons");

for(var i = 0; i < names.length; i++){
    console.log(names[i]);
}

Guardar un Objeto

En realidad si guardamos personas, no nos sirve solo almacenar el nombre. Necesitamos mas datos como su número de documento, apellido, dirección, email. Entonces necesitamos un objeto como este:

var person = {
    "firstName": "Maxi",
    "lastName": "Tompson",
    "document": 32432423
}

La lógica dice que deberíamos poder guardarlo en localStorage de la siguiente manera:

localStorage.setItem("person", person);

Ahora armamos la obtención del dato:

var personFromLS = localStorage.getItem("person");
console.log("Persona " + personFromLS.firstName);

Esto nos debería mostrar el string “Persona Maxi”, pero nos devuelve:

Persona undefined

Pero como puede ser? Esto es porque localstorage no almacena objetos. Pero a fin de cuentas necesitamos que lo haga, entonces que podemos hacer?

Guardar un JSON Object

JSON es técnicamente un string, por lo que nuestro localstorage va a permitir que se guarde. Entonces vamos a convertir nuestro objeto en un json string y guardarlo:

var person = {
    "firstName": "Maxi",
    "lastName": "Tompson",
    "document": 32432423
}
var jsonPerson = JSON.stringify(person);
localStorage.setItem("person", jsonPerson);

Y de esta manera, cuando queramos obtener ese json del localstorage, lo convertiremos a un objeto javascript nuevamente:

var personJSONFromLS = localStorage.getItem("person");
var personFromLS = JSON.parse(personJSONFromLS);
console.log("Persona " + personFromLS.firstName);

Entonces podemos concluir en lo siguiente:

• JSON.stringify(): Convierte JS Object a JSON Object.
• JSON.parse(): Convierte JSON Object a JS Object.

De esta manera podemos almacenar objetos en LocalStorage, primero almacenandolos como json string y luego parseandolos para manejarlos en javascript.