L’objet localStorage conserve les données dans le navigateur

Découvrez comment enregistrer les paramètres et les données préférés de l’utilisateur dans le navigateur avec l’API localStorage dans Angular.

Dans nos applications Angular, la mémorisation des paramètres préférés de l’utilisateur est un excellent moyen de fournir une bonne expérience aux utilisateurs. Nous pouvons enregistrer des données dans le navigateur de l’utilisateur en utilisant le localStorage objet, qui fournit des méthodes pour travailler les données clé-valeur.

Pour comprendre comment localStorage fonctionne, nous devons en savoir plus sur cette API et utiliser les connaissances pour créer un Angular pour enregistrer les préférences de couleur d’arrière-plan.

L’API de stockage local

Le localStorage L’objet nous aide à stocker des données, et cette API fournit quatre méthodes pour nous aider à interagir avec les données stockées dans le navigateur. Nous allons passer en revue chacun d’eux, en montrant un exemple d’utilisation :

• setItem
• obtenir l’article
• retirer l’objet
• dégager

setItem

Le setItem(key, value) La méthode nous aide à ajouter de la valeur au stockage local à l’aide d’une clé et d’une valeur. Par exemple, le code suivant enregistre la clé user-background et le #ff00ff valeur dans le stockage local du navigateur.

Exemple:

localStorage.setItem('user-background','#ff00ff')

Si vous avez besoin de stocker des objets, vous devez d’abord convertir en string en utilisant JSON.stringify.

Important: Les données stockées dans le navigateur n’ont pas de date d’expiration et sont limitées à 5 Mo de stockage pour le domaine.

obtenir l’article

Le getItem(key) La méthode nous aide à lire et s’attend à ce que le nom de la clé renvoie les données dans le stockage local.

Exemple:

localStorage.getItem('user-background')

retirer l’objet

Le removeItem(key) method nous aide à supprimer la clé et la valeur ; il attend le nom de la clé pour le supprimer du stockage local du navigateur.

Exemple:

localStorage.removeItem('user-background')

dégager

Le clear() supprime toutes les clés et n’attend aucun paramètre pour supprimer toutes les clés stockées dans le navigateur.

Exemple:

localStorage.clear()

FINI! Avec l’image complète de l’API localStorage, passons de la théorie à la pratique.

Utiliser la puissance de LocalStorage avec Angular

Nous allons construire une application en Angular qui permet à l’utilisateur de changer la couleur d’arrière-plan, de la mémoriser et de la réinitialiser, nous avons donc besoin de certaines actions dans notre composant.

• Créer un balisage HTML : il comporte un élément HTML de sélection de couleurs et un bouton permettant à l’utilisateur de choisir une couleur et de réinitialiser les valeurs.
• Le fichier TypeScript interagit avec l’API localStorage et fournit les méthodes pour enregistrer, charger et supprimer les valeurs de localStorage.

Allons travailler!

Le balisage des composants

Tout d’abord, nous ajoutons un élément de HTML Pipette à couleurs pour permettre à l’utilisateur de choisir une couleur et de déclarer une variable de modèle #colorPicker.

Il est utile d’interagir avec le sélecteur de couleurs pour obtenir et définir une valeur. Écoutez le Change événement et le lier avec le saveBackgroundColor méthode.

Le saveBackgroundColor La méthode reçoit la variable de référence et prend la valeur de l’élément sélecteur de couleur pour enregistrer la couleur sélectionnée.

Ensuite, ajoutez un élément HTML Button, écoutez le Click événement, et lien avec le removePreferences(). Il appellera notre code TypeScript pour supprimer les valeurs.

Le code ressemblera à ceci :

<div class="container">
 <div class="row">
   <h1>Angular and LocalStorage</h1>
<p>We, save your background color, if you want returns :) </p>
 </div>
 <div class="row">
   <input
     type="color"
     #colorPicker
     [value]="userBackgroundColor"
     (change)="saveBackgroundColor(colorPicker.value)"
   />
 </div>
 <button class="btn-remove" (click)="removePreferences()">
   Remove preferences
 </button>
</div>

En savoir plus sur les sujets précédents :

Méthodes et événements de composant

Cette étape déclarera des méthodes pour le balisage HTML, utilisera les crochets de cycle de vie angulaire, travaillera avec l’API localStorage et déclarera des variables et des méthodes pour fournir le comportement attendu d’enregistrement et de chargement des préférences d’arrière-plan.

variables

Comme nous l’avons appris de l’API de stockage locale, cela fonctionne avec des paires clé-valeur. Tout d’abord, déclarez le storageKey variable comme clé avec la 'user-background' valeur.

Ensuite, créez defaultColor variable pour fournir un arrière-plan par défaut et userBackgroundColor pour affecter la valeur sélectionnée au sélecteur de couleurs.

private storageKey = 'user-background';
private defaultColor = '#ff00ff';
userBackgroundColor = null;

Méthodes et logique TypeScript des composants

Le balisage HTML de notre composant nécessite deux méthodes publiques principales, mais nous allons créer d’autres méthodes pour fournir toutes les fonctionnalités.

• getBackgroundColor: récupère l’arrière-plan à partir de localStorage ou renvoie la couleur par défaut.
• loadBackgroundPreferences: attribuez la couleur sélectionnée à l’élément du sélecteur de couleurs et mettez à jour la couleur d’arrière-plan de la page.
• removePreferences: Supprimez les clés du stockage local et rechargez les préférences de l’utilisateur en arrière-plan.
• saveBackgroundColor: Enregistrez la couleur sélectionnée et chargez les préférences de couleur d’arrière-plan.

Premièrement le getBackgroundColor méthode utilise la localStorage.getItem() lire le storageKey. S’il existe, il renvoie la valeur ; sinon il renvoie le defaultColor variable.

private getBackgroundColor(): string {
return localStorage.getItem(this.storageKey) || this.defaultColor;
}

Ensuite, créez loadBackgroundPreferences() méthode. Il attribue à userBackgroundColor variable la getBackgroundColor() valeur de retour et remplace la body.style.background couleur avec le userBackgroundColor valeur.

Pour charger la couleur par défaut ou enregistrée, appelez la méthode dans le hook de cycle de vie ngOnInit.

ngOnInit(): void {
this.loadBackgroundPreferences();
}
private loadBackgroundPreferences(): void {
this.userBackgroundColor = this.getBackgroundColor();
window.document.body.style.backgroundColor = this.getBackgroundColor();
}

Enfin, déclarez les deux dernières méthodes publiques, saveBackgroundColor et removePreferences.

Le saveBackgroundColor est lié à l’événement (modifier) ​​du sélecteur de couleurs, en transmettant la valeur.

En utilisant le setItem() méthode à partir du stockage local, enregistrez la clé storageKey avec la valeur de couleur et appeler le loadBackgroundPreferences() méthode pour charger les préférences de l’utilisateur.

public saveBackgroundColor(color: string): void {
localStorage.setItem(this.storageKey, color);
this.loadBackgroundPreferences();
}

Le bouton utilise removePreferences méthode dans le balisage. Il supprime la clé du localStorage à l’aide de la méthode removeItem et recharge les préférences.

Nous devrions utiliser localStorage.clear(), mais cela supprime toutes les clés. Dans notre cas, nous ne voulons supprimer qu’un seul.

public removePreferences(): void {
localStorage.removeItem(this.storageKey);
this.loadBackgroundPreferences();
}

Nous avons plongé dans chaque méthode pour avoir le comportement attendu, et le code final ressemble à ceci :

import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
export class AppComponent {
 private storageKey = 'user-background';
 private defaultColor = '#bedac9';
 userBackgroundColor = null;

 ngOnInit(): void {
   this.loadBackgroundPreferences();
 }
 private loadBackgroundPreferences(): void {
   this.userBackgroundColor = this.getBackgroundColor();
   window.document.body.style.backgroundColor = this.getBackgroundColor();
 }
 removePreferences(): void {
   localStorage.removeItem(this.storageKey);
   this.loadBackgroundPreferences();
 }
 saveBackgroundColor(color: string): void {
   localStorage.setItem(this.storageKey, color);
   this.loadBackgroundPreferences();
 }
 private getBackgroundColor(): string {
   return localStorage.getItem(this.storageKey) || this.defaultColor;
 }
}

Conclusion

Nous avons appris et construit un cas d’utilisation réel pour localStorage dans nos applications. Vous pouvez trouver un exemple de code complet pour cet article et jouer avec l’exemple d’application dans les liens suivants :

Merci pour votre temps. J’espère que cela vous aidera à apprendre à travailler avec le stockage local et à créer une expérience utilisateur merveilleuse dans vos applications.