sessionStorage dans Angular

Rana Hasnain Khan 21 décembre 2022
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 :

enregistrer les données dans le stockage de session en Angular

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

Production :

enregistrer les données dans le résultat de stockage de session

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 :

obtenir des données du stockage de session dans angular

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 :

supprimer des données spécifiques du stockage de session dans angular

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 des données spécifiques du résultat de stockage de session

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 :

supprimer toutes les données du stockage de session dans angular

Résultat final:

résultat final de l&rsquo;enregistrement et de la suppression des données du stockage de session

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;
}
Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn