sessionStorage dans Angular

Nous en apprendrons davantage sur sessionStorage et comment enregistrer, obtenir, supprimer des données spécifiques ou supprimer toutes les données dans sessionStorage dans Angular.

Stockage de session dans Angular

sessionStorage conserve une zone de stockage distincte pour chaque origine donnée disponible pendant la durée de la session de page. sessionStorage est vidé lorsque l’onglet ou la fenêtre est fermée.

Enregistrement de données à l’aide de sessionStorage

Pour stocker des données dans sessionStorage, nous allons créer une fonction saveData() dans le fichier app.component.ts.

# angular
saveData(){

}

Dans la fonction saveData, nous utiliserons setItem pour stocker le nom dans le sessionStorage.

# angular
saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
}

Notre fonction de stockage des données dans sessionStorage est terminée.

Nous devons éditer notre fichier app.component.html et ajouter un bouton avec l’événement click à la fonction saveData(). Ainsi, notre code dans app.component.html ressemblera à ci-dessous.

# angular
<hello name="{{ name }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

Production :

Lorsque nous cliquons sur le bouton, il enregistrera les données dans le sessionStorage avec la key du name.

Production :

Récupérer les données du sessionStorage

Nous verrons comment récupérer les données stockées dans le sessionStorage et les afficher.

Nous allons créer une fonction getData() dans app.component.ts.

# angular
getData(){
    
  }

Dans la fonction getData(), nous utiliserons getItem pour obtenir les données souhaitées en fonction de key dans le sessionStorage.

# angular
getData(){
    return sessionStorage.getItem('name');
  }

Nous en avons maintenant terminé avec notre fonction et nous devons afficher les données que nous avons obtenues de la fonction getData().

Nous allons éditer app.component.html et remplacer l’attribut name de la balise hello. Ainsi, notre code dans app.component.html ressemblera à ci-dessous.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

Production :

Suppression de données spécifiques du sessionStorage

Nous discuterons de la suppression de données spécifiques basées sur la key du sessionStorage en cliquant sur le bouton.

Dans un premier temps, nous allons créer la fonction removeData() dans le app.component.ts.

# angular
removeData(){
    
  }

Nous utiliserons le removeItem pour supprimer des données spécifiques du sessionStorage en fonction de la key. Nous ajouterons également quelques données supplémentaires dans le sessionStorage, que nous pouvons supprimer pour cet exemple.

Notre code dans app.component.ts ressemblera à ci-dessous.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Session Storage in Angular 12 By Husnain';
  name = 'Angular ' + VERSION.major;

  saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
    sessionStorage.setItem('location', 'Pakistan');
  }
  getData() {
    return sessionStorage.getItem('name');
  }
  removeData() {
    sessionStorage.removeItem('location');
  }
}

Dans le code ci-dessus, nous avons ajouté des données supplémentaires avec l’emplacement de la key dans le sessionStorage, supprimé au clic du bouton.

Nous devons créer un bouton dans app.component.html, qui appellera notre fonction removeData(). Ainsi, app.component.html ressemblera à ceci.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>

Nous allons également styliser les boutons pour qu’ils soient plus beaux et ajouter le code suivant dans le app.component.css.

# angular
p {
  font-family: Lato;
}
.btn{
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}

Production :

Nous allons cliquer sur le bouton Save Data pour enregistrer l’emplacement sessionStorage. Après cela, nous cliquerons sur le bouton Remove Location pour supprimer les données de localisation de sessionStorage.

Supprimer toutes les données du sessionStorage

Nous discuterons de la suppression de toutes les données du sessionStorage dans Angular.

Nous allons créer la fonction deleteData() dans le app.component.ts.

# angular
deleteData(){

  }

Nous utiliserons clear pour supprimer toutes les données de sessionStorage. Donc, notre code ressemblera à ci-dessous.

# angular
deleteData(){
    sessionStorage.clear();
  }

Nous devons créer un bouton dans app.component.html pour appeler la fonction deleteData(). Donc, notre code ressemblera à ci-dessous.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>

Production :

Résultat final:

Nos fichiers ressembleront à ci-dessous à la fin.

app.component.ts :

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Session Storage in Angular 12 By Husnain';
  name = 'Angular ' + VERSION.major;

  saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
    sessionStorage.setItem('location', 'Pakistan');
  }
  getData() {
    return sessionStorage.getItem('name');
  }
  removeData() {
    sessionStorage.removeItem('location');
  }
  deleteData() {
    sessionStorage.clear();
  }
}

app.component.html :

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>

app.component.css :

# angular
p {
  font-family: Lato;
}
.btn {
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}