0

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 :

¿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 :

getItem

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

Código :

length

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

Código :

removeItem

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

Código :

clear

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

Código :

¿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 :

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 :

¿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 :

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 :

Mira el ejemplo aquí
Gracias

Enviar comentario

 

Leave a reply