Sessionstorage y LocalStorage Parte 1 : HTML5 Javascript


SessionStorage


Si hay algo que siempre se extraño 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 paginas 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.

¿SessionStorage? ¿Pero como es esto?

Cuando abrimos una página web con el navegador pedimos información al servidor y en ese momento se inicia una sesión, con el cual podemos guardar datos que estará sólo accesible para el navegador con el cual estamos conectados. Ahora, si con el navegador no realizamos ninguna actividad con el servidor durante al menos 15 minutos ,entonces el servidor borrará esos datos de la sesión.

Ejemplo : Una forma de guardar datos con javascript.
//guardando una cadena
sessionStorage.miNombre = 'Franz Wilder';
 //otra forma de guardar
sessionStorage['valor'] = 'Franz';
 // devuelve 'Franz Wilder'
console.log( sessionStorage.miNombre );

- 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 sobreescribe el dato guardado.

//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.

//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

Devuelve la cantidad de datos guardados.
//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.

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.

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 !
IEFIREFOXSAFARICHROMEOPERAIPHONEANDROID
8.0+3.5+4.0+4.0+10.5+2.0+2.0+

Si quieres comprobar la compatibilidad con el navegador puedes usar este 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 que pasa si se supera la capacidad de almacenamiento? .
Para ese caso podemos enfrentar esta situación capturando el error.
try {
    localStorage.setItem('valor', 'Franz');
} 
catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Ha excedido el almacenamiento!');
    }
}


¿Que almacena estos objetos globales?

Lamentable los datos almacenados son guardados como cadenas y al recuperarlo con el método getItem( ) se obtienen cadenas.
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 ).
//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);


Ejemplo: guarda y recupera datos, aún así se cierre la página.
<script>
    function guardar(){
        var miDato = document.getElementById('miInput').value;
        localStorage.setItem('miDato',miDato);
    }
    function recuperar(){
        var miDato = localStorage.getItem('miDato');
        document.getElementById('miInput').value=miDato; 
    }
</script>

<input type="text" id="miInput">

<input type="button" onclick="guardar()" value="guardar">
<input type="button" onclick="recuperar()" value="recuperar">

Demostración

3 comentarios:

  1. Si creo una aplicación HTML 5, y pongo el local storage, con otra aplicación puedo rescatarla ?

    aplicación A
    localStorage.setItem('Dato');

    aplicación B
    localStorage.getItem('Dato');


    Saludos.

    ResponderEliminar
    Respuestas
    1. los datos estan disponibles mientras el usuario no cierre la ventana y esten asociados a un dominio.

      Eliminar