Como utilizar el LocalStorage en Angular

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');

 

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);

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));

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);

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();