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.
En Internet Explorer 8, el espacio disponible de almacenamiento de SessionStorage es de 8MB a comparación de los 4KB de las cookies.
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.
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 = sessionStoragelength; //total = 3
- removeItem
Este método elimina el dato de una clave específica.
sessionStorage'miClave''Franz' ; sessionStorage getItem'miClave' ; // devuelve 'Franz' sessionStorage removeItem'miClave' ; sessionStorage getItem'miClave' ; // devuelve NULLsetItem
- clear
Este método elimina todo el espacio de almacenamiento. Todas las claves se eliminan.sessionStorage'miClave''Franz' ; sessionStorage setItem'miLLave''Renzo' ; sessionStoragelength; // devuelve 2 //borrando sessionStorageclear ; sessionStoragelength; // devuelve 0setItem
¿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 !
Si quieres comprobar la compatibilidad con el navegador puedes usar este código.
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.
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 ).
Ejemplo: guarda y recupera datos, aún así se cierre la página.
Demostración
IE | FIREFOX | SAFARI | CHROME | OPERA | IPHONE | ANDROID |
---|---|---|---|---|---|---|
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.
iftypeof 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'franz1'236 ; localStorage setItem'franz2'2 ; localStorage setItem'franz3''cadena' ; localStorage setItem'franz4' nombre:'franz' ; console.log localStorage getItem'franz1' ; // "2,3,6" console.logtypeof localStorage getItem'franz1' ; // string console.log localStorage getItem'franz2' ; // "2" console.logtypeof localStorage getItem'franz2' ; // string console.log localStorage getItem'franz3' ; // "cadena" console.logtypeof localStorage getItem'franz3' ; // string console.log localStorage getItem'franz4' ; //"[object Object]" console.logtypeof localStorage getItem'franz4' ; // stringsetItem
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 = JSONparse resultado ; //devuelve "object" console.logtypeof objeto ;
Ejemplo: guarda y recupera datos, aún así se cierre la página.
Demostración
Si creo una aplicación HTML 5, y pongo el local storage, con otra aplicación puedo rescatarla ?
ResponderEliminaraplicación A
localStorage.setItem('Dato');
aplicación B
localStorage.getItem('Dato');
Saludos.
los datos estan disponibles mientras el usuario no cierre la ventana y esten asociados a un dominio.
Eliminara
ResponderEliminar