Como utilizar el LocalStorage en Angular

by | May 24, 2019 | Angular, Javascript

El LocalStorage permite almacenar datos en el navegador web. Y que estos persistan y estén disponibles durante la navegación en la aplicación web, hasta que esta información sea borrada del navegador.

Guardar datos en el navegador

Para guardar datos en el LocalStorage utilizaremos la siguiente instrucción:

localStorage.setItem('tutorial', 'Como utilizar el LocalStorage en Angular');

Datos en el LocalStorage

 

Recuperar datos guardados en el navegador

Para recuperar los datos almacenados en el LocalStorage utilizaremos la siguiente instrucción a la cual le pasaremos la ‘key’ del dato que queremos recuperar:

this.dato = localStorage.getItem('tutorial');

console.log(this.dato);

Obtener datos en el LocalStorage

Guardar objetos el navegador

Para guardar un objeto en LocalStorage, antes debemos convertirlo a JSON string, pare ello utilizaremos JSON.stringify() como se muestra en la siguiente instrucción:

localStorage.setItem('usuario', JSON.stringify(this.user));

Objeto en el LocalStorage

Recuperar objetos guardados en el navegador

Para recuperar un objeto almacenado en LocalStorage será necesario convertir el JSON string a un objeto, para ello utilizaremos JSON.parse() como se muestra en la siguiente instrucción:

this.datoUsuario = JSON.parse(localStorage.getItem('usuario'));

console.log(this.datoUsuario);

Objeto recuperado en el LocalStorage

Borrar datos guardados en el LocalStorage

Para borrar un elemento del LocalStorage utilizaremos la siguiente instrucción:

localStorage.removeItem('tutorial');

Para borrar todos los elementos del LocalStorage utilizaremos la siguiente instrucción:

localStorage.clear();

Entradas relacionadas

Descubre en 5 minutos las áreas de tu empresa puedes mejorar