Jose Gallego, UX/Front Designer a tiempo parcial, Arquero y Esclavo perruno a tiempo completo

Metodo Local Storage deHTML5

j

by JoseGallego

}

11.06.2015

Local Storage, es un método propio de HTML5 que nos permite almacenar datos localmente en nuestro navegador.

Antes de su existencia, los datos tenían que ser almacenados en las llamadas cookies, las cuales se almacenaban por igual en cada petición al servidor. LocalStorage es mucho más seguro y se pueden almacenar largas cantidades de datos sin que afecte al rendimiento del navegador.

Básicamente existen 2 objetos de almacenaje
LocalStorage y sessionStorage.
– La primera Almacena el dato en el navegador sin fecha de expiración, con lo que al cerrar el anvegador y volver a entrar en una hora, un mes un año o eones, nuestro dato seguirá ahí.
– En la segunda opción, el dato perdurará hasta que la sesión, pestaña, ventana del navegador se cierre.

Y con lo dicho, vamos al tema!! Los siguientes ejemplos son validos con ambos objetos, pero yo solo voy a usar localStorage.

– De este modo, chequeamos si nuestro navegador soporta localStorage:

– Para almacenar un dato en localStore procedemos de la siguiente manera:

– Para recuperar un dato guardado anteriormente:

– ¿Y si queremos eliminar un dato introducido anteriormente?

Como podéis ver, es muy sencillo guardar un dato y recuperarlo/eliminarlo más adelante, tiene muchísimos usos y puede ser muy utiil si sabemos usarlo bien, por ejemplo para hacer una selección de datos que queremos volver a mostrar o dar la opción de modificar más adelanteen una página más interna.

Ten en cuenta que el dato siempre se guarda en formato STRING con lo que para algunos casos habrá que transformarlo en número para poder jugar con el dato.

En el siguiente ejemplo convertimos la cadena (por defecto) a número, para poder manejar este tipo de variable. En este caso contamos las veces que hacermos click un un botón.

Espero a alguien le sea util.

Y esto es toooooooodo Amigos!!

Featured

Related Posts

ECOSIA, Plantando árboles mientras navegas por la red

ECOSIA es el buscador que destina una gran parte de sus ganancias por anuncios/Ads  en plantar árboles. Según recogen en su web, llevan más de 3 millones (camino de 4) de árboles plantados en todo el mundo, sobre todo en la zona de Burkina Faso, África. También...

leer más

Tutorial SASS Framework.

Hoy os traigo el contenido del taller de SASS que impartí hace unas semanas conjuntamente con mi compañero Pixeltomas. Sass (acrónimo de Syntactically Awesome StyleSheets) es una extensión de CSS escrita en RUBY que añade características muy potentes y elegantes a...

leer más

Need Help?

Get In Touch

Follow Us

About the Author

JoseGallego

Comments

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Related Posts

Tutorial SASS Framework.

Tutorial SASS Framework.

Hoy os traigo el contenido del taller de SASS que impartí hace unas semanas conjuntamente con mi compañero Pixeltomas. Sass (acrónimo de Syntactically Awesome StyleSheets) es una extensión de CSS escrita en RUBY que añade características muy potentes y elegantes a...

Palettab y Colourlovers

Palettab y Colourlovers

Palettab es una extensión de Chrome que muestra selecciones de paletas de colores y fuentes distintas, extraidas de www.colourlovers.com cada vez que abres una nueva pestaña (Tab). Me parece una de esas extensiones útiles ya que cada vez que abras una nueva pestaña de...

Metodo Aplication Cache de HTML5

Metodo Aplication Cache de HTML5

Metodo Aplication Cache de HTML5 ¿Para qué sirve Aplication Cache?, Muy sencillo!Trabajar sin conexión en una web. ¿Qué ventajas tiene eso?…Pues según la W3c: Offline Browsing: Puedes explorar un sitio web por completo estando offline. Speed: Puedes almacenar todos...

Get In Touch

Get In Touch