Guardar en disco con HTML5 y Javascript: SessionStorage y LocalStorage

Si hay algo que siempre se extrañó de HTML es en alguna forma de almacenar datos, que ayude al usuario a una mejor movilidad mientras navega nuestras páginas. Esto se puede lograr mediante el uso de las llamadas cookies, el problema es que tiene ciertas restricciones. Ya con HTML5 y Javascript esto se puede lograr mediante un atributo del DOM llamado sessionStorage que se utiliza como objeto global de Javascript, el cual dispone de métodos que nos ayudan a manipular los datos que queramos utilizar.

SessionStorage vs Cookies

Otra opción a las cookies sería el objeto SessionStorage, con el cual podríamos tener disponible los datos almacenados por todas las páginas web del mismo sitio, con el cual hacer algo parecido a las Sessiones de PHP.
En Internet Explorer 8, el espacio disponible de almacenamiento de SessionStorage es de 8MB a comparación de los 4KB de las cookies.

Ejemplo : Una forma de guardar datos con javascript.

Código :

//guardando una cadena
sessionStorage.miNombre = 'Franz Wilder';

//otra forma de guardar
sessionStorage['valor'] = 'Franz';

// devuelve 'Franz Wilder'
console.log( sessionStorage.miNombre );

¿Cuales son los métodos?

setItem

Este método se utiliza para almacenar datos en una clave especificada. Si el dato se guarda en una clave ya existente, entonces se sobrescribe el dato guardado.

Código :

//guardando datos
sessionStorage.setItem('miClave','Franz');
sessionStorage.setItem('miLLave','Escorpio');

getItem

Este método devuelve el valor del dato guardado en una clave dada, pero devuelve null si la clave no existe.

Código :

//guardando datos
sessionStorage.miClave = 'Franz';
//otra manera de guardar datos
sessionStorage.setItem('miLLave','Renzo');
    
// recuperando los datos
var dato1 = sessionStorage.getItem('miClave'); // dato1 = 'Franz'
var dato2 = sessionStorage.getItem('miLLave'); // dato2 = 'Renzo'
 

//el valor de variable es NULL porque 'miKey' no es una clave existente
var variable = sessionStorage.getItem('miKey');

length

Este método devuelve el número de datos guardados.

Código :

//guardando datos
sessionStorage.setItem('miLlave','Franz'); 
sessionStorage.setItem('miClave','Renzo');
sessionStorage.setItem('miKey','Paul');

var total = sessionStorage.length; //total = 3

removeItem

Este método elimina el dato de una clave específica.

Código :

sessionStorage.setItem('miClave','Franz');
sessionStorage.getItem('miClave');   // devuelve 'Franz'
    
sessionStorage.removeItem('miClave');
sessionStorage.getItem('miClave');   // devuelve NULL

clear

Este método elimina todo el espacio de almacenamiento. Todas las claves se eliminan.

Código :

sessionStorage.setItem('miClave','Franz'); 
sessionStorage.setItem('miLLave','Renzo');
sessionStorage.length;   // devuelve 2
    
//borrando
sessionStorage.clear();
sessionStorage.length;   // devuelve 0

¿y LocalStorage?

Es igual al objeto sessionStorage incluso con los mismos métodos, con la diferencia en que los datos se mantienen así hayamos cerrado la pestaña o el navegador.

¿Mi navegador es compatible?

Aunque parezca mentira sessionStorage funciona en todos los navegadores incluso en Internet Explorer ! (8.0 +)
Si quieres comprobar la compatibilidad con el navegador puedes usar este código.

Código :

if(typeof(Storage)!=="undefined"){
    alert('Funciona');
}
else{
    alert('MOG!  usas IE 6 o 7?');
}

Tus visitantes usan IE6 o 7? entonces estos códigos es la solución.

¿Y qué pasa si se supera la capacidad de almacenamiento?
Para ese caso podemos enfrentar esta situación capturando el error.

Código :

try {
    localStorage.setItem('valor', 'Franz');
} 
catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Ha excedido el almacenamiento!');
    }
}

¿Qué almacenan estos objetos globales?

Lamentable los datos almacenados son guardados como cadenas y al recuperarlo con el método getItem( ) se obtienen cadenas.

Código :

localStorage.setItem('franz1',[2,3,6]);
localStorage.setItem('franz2',2);
localStorage.setItem('franz3','cadena');
localStorage.setItem('franz4',{nombre:'franz'});
 
console.log(localStorage.getItem('franz1'));  //  "2,3,6"
console.log(typeof(localStorage.getItem('franz1'))); //  string
 
console.log(localStorage.getItem('franz2'));  //  "2"
console.log(typeof(localStorage.getItem('franz2'))); //  string
 
console.log(localStorage.getItem('franz3'));  //  "cadena"
console.log(typeof(localStorage.getItem('franz3'))); //  string
 
console.log(localStorage.getItem('franz4'));   //"[object Object]"
console.log(typeof(localStorage.getItem('franz4'))); //  string

Como se puede ver en el ejemplo, todos los datos guardados se convierten en cadena, incluso los objetos se guardan como en forma de cadena "[object Object]". Para solucionar esto hacemos uso de los métodos JSON.stringify (convierte el valor a puro texto) y JSON.parse (analiza la cadena y devuelve el valor analizado).

Código :

//creando el objeto
var objeto = {nombre:'Franz', color:'Azul'};
//JSON.stringify(objeto) => "{nombre:'Franz', color:'Azul'}"
objeto = JSON.stringify(objeto);
//guardando como string 
localStorage.setItem('miObjeto',objeto);
//recuperando como string 
var resultado = localStorage.getItem('miObjeto'); 
//JSON.parse convierte a objeto
objeto = JSON.parse(resultado); 
//devuelve "object" 
console.log(typeof objeto);

Mira el ejemplo aquí
Gracias

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.