Stocker les données dans le stockage local Angular

Nous présenterons comment stocker des données dans un stockage local dans Angular.

Stockage local dans Angular

Le stockage local est un moyen de stocker des données sur l’ordinateur du client à l’aide de paires clé-valeur dans un navigateur Web. La meilleure chose à propos du stockage local est qu’il n’y a pas de date d’expiration pour les données stockées dans le stockage local, mais nous pouvons toujours les supprimer en utilisant sa fonction clear().

Maintenant, pour comprendre comment nous pouvons facilement stocker des données en utilisant des paires de clés et de valeurs dans le stockage local dans Angular. Tout d’abord, nous allons créer une fonction storeName() qui stockera le nom dans le stockage 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);
  }
}

Maintenant, nous allons créer un template dans le fichier app.component.html. Nous allons créer un bouton pour stocker les données dans le stockage local lorsque l’utilisateur clique dessus.

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

Maintenant, vérifions comment notre application fonctionne maintenant.

Dans l’exemple ci-dessus, lorsque nous avons cliqué sur le bouton, il a stocké le nom dans le stockage local à l’aide de paires clé et valeur.

Nous discuterons de la suppression de ces données du stockage local à l’étape suivante. Parce que si nous stockons des données sensibles dans un stockage local, elles peuvent être facilement accessibles. Il est donc préférable de supprimer les données sensibles une fois le besoin satisfait.

Il existe deux façons de supprimer les données du stockage local. Nous pouvons soit utiliser une clé pour supprimer des données spécifiques, soit supprimer toutes les données stockées dans le stockage local.

Nous verrons comment supprimer uniquement des données spécifiques du stockage local.

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

Nous allons ajouter un bouton avec l’action onClick dans app.component.html.

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

Voyons maintenant comment fonctionne notre application.

Dans l’exemple ci-dessus, lorsque nous cliquons sur le bouton Delete Name, cela supprime les données avec la clé Name uniquement.

Créons une autre fonction pour supprimer toutes les données du stockage local dans Angular.

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

Créons un bouton dans le template avec la méthode onClick.

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

Voyons maintenant comment fonctionne notre application.

Dans l’exemple ci-dessus, chaque fois que nous cliquons sur le bouton Delete All Data, il supprime toutes les données du stockage local.