Almacenar datos en almacenamiento local Angular

Presentaremos cómo almacenar datos en el almacenamiento local en Angular.

Almacenamiento local en Angular

El almacenamiento local es una forma de almacenar datos en la computadora del cliente utilizando pares de clave y valor en un navegador web. Lo mejor del almacenamiento local es que no hay fecha de caducidad para los datos almacenados en el almacenamiento local, pero siempre podemos borrarlos usando su función clear().

Ahora, para comprender cómo podemos almacenar datos fácilmente usando pares de clave y valor en el almacenamiento local en Angular. Primero, crearemos una función storeName() que almacenará el nombre en el almacenamiento local.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  key: string = 'Name';
  myItem: string;
  storeName() {
    localStorage.setItem(this.key, 'Angular');
    this.myItem = localStorage.getItem(this.key);
  }
}

Ahora, crearemos una plantilla en el archivo app.component.html. Crearemos un botón para almacenar datos en el almacenamiento local cuando el usuario haga clic en él.

#  angular
<button (click)="storeName()">Click to store name</button>

Ahora, veamos cómo funciona nuestra aplicación ahora.

En el ejemplo anterior, cuando hicimos clic en el botón, almacenó el nombre en el almacenamiento local usando pares de clave y valor.

Discutiremos la eliminación de estos datos del almacenamiento local en el siguiente paso. Porque si almacenamos datos confidenciales en el almacenamiento local, se puede acceder fácilmente a ellos. Por lo tanto, es mejor eliminar los datos confidenciales una vez que se haya satisfecho la necesidad.

Hay dos formas de eliminar los datos del almacenamiento local. Podemos usar una clave para eliminar cualquier dato específico o eliminar todos los datos almacenados en el almacenamiento local.

Discutiremos cómo eliminar solo datos específicos del almacenamiento local.

# angular
SpecificDelete() {
    localStorage.removeItem('Name');
  }

Añadiremos un botón con la acción onClick en app.component.html.

# angular
<button (click)="SpecificDelete()">Delete Name</button>

Veamos cómo funciona nuestra aplicación ahora.

En el ejemplo anterior, cuando hacemos clic en el botón Delete Name, solo se eliminan los datos con la clave Name.

Creemos otra función para eliminar todos los datos del almacenamiento local en Angular.

# angular
deleteName() {
    localStorage.clear();
  }

Vamos a crear un botón en la plantilla con el método onClick.

# angular
<button (click)="deleteName()">Delete All Data</button>

Veamos cómo funciona nuestra aplicación ahora.

En el ejemplo anterior, cada vez que hacemos clic en el botón Delete All Data, se eliminan todos los datos del almacenamiento local.