Como usar el LocalStorage de JavaScript

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 😉

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

Poner un comentario

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