Guardando data en localStorage

Junto con la llegada de HTML5 hemos visto muchas mejoras en la forma cómo guardar datos en el navegador local del usuario, tales como localStorage y sessionStorage, viniendo este último a reemplazar a los obsoletos cookies.

Tanto los cookies, como los sessionStorage y localStorage tienen limitaciones en la longitud de data que podemos disponer. Así, los cookies sólo permiten guardar hasta 4095 bytes, mientras que los sessionStorage y los localStorage soportan entre 8MB y 10MB dependiendo del navegador (justo la verdadera belleza de estos), de manera que podemos transferir data entre páginas temporalmente mientras el usuario navega nuestro site (sessionStorage) o podemos dejar data guardada localmente por tiempo indefinido -o hasta que el usuario limpie su navegador- (localStorage).

Ahora, enfoquémonos en la data guardada por tiempo indefinido. Para este efecto podríamos usar Web SQL o Indexed Database, pero sería demasiado si sólo necesitamos datos básicos tales como nombre, apellido, nacionalidad u otros, así que usaremos localStorage.

Conozcamos los métodos para manejar la data con localStorage:

Para guardar la data tenemos dos alternativas:

localStorage.setItem('nombre_storage','Mi data guardada');
localStorage.nombre_storage = 'Mi data guardada';

Para leer nuestro storage la temática es similar a la anterior:

console.log(localStorage.getItem('nombre_storage')); // Devuelve: 'Mi data guardada'
console.log(localStorage.nombre_storage); // Devuelve: 'Mi data guardada'

Para borrar el storage en cuestión:

localStorage.removeItem('nombre_storage');

Para conocer la cantidad de storages guardados en nuestro navegador (todos, incluidos los creados por otros websites):

console.log(localStorage.length);

Para borrar todos los storages (incluidos los creados por otros websites):

localStorage.clear();

Ahora vamos a lo mejor de localStorage: guardar objetos. Como parte del DOM, localStorage es un objeto, pero lamentablemente no permite guardarlos directamente, así que debemos convertir dicha data a cadena.

Asumamos que tenemos el siguiente objeto:

var dat = {
	nombre: 'Junior',
	apellido: 'Hernandez',
	edad: '[indecible]',
	nacionalidad: 'Dominicano',
	residencia: 'Santo Domingo'
};

Convertimos la data a cadena usando JSON.stringify:

var datStr = JSON.stringify(dat);
localStorage.setItem('junidata',datStr);

Luego, para recuperar la data en condición de objeto nuevamente la reconvertimos con JSON.parse:

var datObj = JSON.parse(localStorage.junidata);
console.log(datObj.nacionalidad); // Devuelve: Dominicano

Listo, a partir de ahora podemos guardar toda la data del usuario como un objeto y consultarla desde el mismo navegador, salvaguardando recursos de nuestros servidores. Claro, es importante destacar que los datos sensibles del usuario no pueden ser dejados a la ligera sin ser encriptados, así que mucho cuidado con ese detalle.