imagesLocal 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!!