Hoy vamos a aprender a utilizar el LocalStorage de HTML5 y JavaScript para usarlo en nuestros proyectos web.
¿Que es el LocalStorage?
Con el LocalStorage o HTML5 Web Storage podemos guardar información en nuestro navegador web a modo de sesión y que esa información persista y esté disponible durante la navegación entre las diferentes páginas de nuestro sitio o aplicación web.
El LocalStorage suele usarse mucho en aplicaciones web desarrolladas completamente con JavaScript, con tecnologías como Angular, aunque también puede aplicarse a cualquier web en la cual necesitemos compartir datos entre secciones.
En las aplicaciones web monolíticas desarrolladas con un lenguaje de backend como PHP o cualquier otro, el uso del LocalStorage es sustitudo por las Sesiones del propio lenguaje de backend ya que el frontend y el backend están completamente integrados y mezclados.
Veamos como usar el LocalStorage en JavaScript.
Comprobar si el navegador es compatible
Podemos ver si el navegador web tiene disponible la funcionalidad del localstorage así:
if (typeof(Storage) !== "undefined") {
// LocalStorage disponible
} else {
// LocalStorage no soportado en este navegador
}
Guardar datos en el navegador
Para almacenar datos y guardar nuevos elementos o indices en el LocalStorage usaremos la siguiente instrucción:
// Guardar
localStorage.setItem("titulo", "Curso de Angular avanzado - Víctor Robles");
De esta manera damos de alta un nuevo elemento en el almacenamiento del browser.
Recuperar datos
Para conseguir los datos que tenemos guardados en un indice de nuestro almacenamiento local del navegador usaremos:
// Conseguir elemento
localStorage.getItem("titulo");
Esto nos devolverá el valor que hemos guardado anteriormente.
Guardar objetos en el LocalStorage
Para guardar un objeto primero debemos convertirlo en un string json ya que el localstorage no permite guardar objetos de JavaSciprt como tal.
Tendríamos que hacer algo así:
localStorage.setItem("usuario", JSON.stringify(mi_objeto));
Guardamos el elemento usuario cuyo valor es un objeto convertido a string.
Sacar objetos del LocalStorage
Para recuperar un objeto primero debemos convertirlo en un objeto de JavaScript json en lugar del string json que hay guardado por defecto.
Haríamos esto:
JSON.parse(localStorage.getItem("usuario"));
Recordemos que:
JSON.parse() es para parsear o convertir algo a un objeto JSON usable por JavaScript.
JSON.stringify() es para crear un JSON string de un objeto o un array.
Borrar o vaciar el localStorage
Para eliminar un elemento del localStorage haremos:
localStorage.removeItem("titulo");
Para eliminar todas las variables guardadas en el localStorage haremos:
localStorage.clear();
Con esto ya hemos visto lo fundamental para trabajar con el almacenamiento local (localStorage) en nuestras aplicaciones web 😉
