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

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

UX Design Tips for an eCommerce Experience filled with Empathy

UX Design Tips for an eCommerce Experience filled with Empathy

Article originally writed for Empathy.co on Medium, you can also read it here: https://medium.com/empathyco/ux-design-tips-for-an-ecommerce-experience-filled-with-empathy-85cfb92d951b eCommerce sites have taken the high street and more traditional shopping by storm...

ECOSIA, Plantando árboles mientras navegas por la red

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

Get In Touch

Get In Touch