Accès au stockage du navigateur dans Blazor Web Apps

Aujourd’hui, nous allons apprendre à écrire et à lire à partir du stockage local et de session dans une application Web Blazor Server.

Dans le développement Web moderne, le stockage de données transitoires spécifiques à l’utilisateur est une tâche courante. Lorsque l’ensemble de l’application Web s’exécute dans le navigateur, nous pouvons bénéficier du stockage des données dans le navigateur au lieu de passer par un cycle demande/réponse pour stocker les données sur le serveur.

Les exemples sont les éléments d’un panier, l’ordre de tri d’un tableau, le stockage des saisies de formulaire avant la soumission, la devise ou la langue spécifiée ou la disposition des éléments du tableau de bord.

Les avantages de l’utilisation du stockage du navigateur

Tout d’abord, pourquoi devrions-nous nous soucier de stocker les données sur le client dans le stockage du navigateur au lieu de les transmettre au serveur et de les stocker dans la base de données ?

Le stockage côté client présente quelques avantages importants qui, selon le cas d’utilisation, ont plus ou moins d’impact sur la décision de stocker les informations.

1. Performance: Comme indiqué dans l’introduction, comme nous n’avons pas de requête HTTP dans les deux sens vers le serveur, il n’y a pas de latence du réseau et la charge globale du serveur est réduite.
2. Coût du serveur réduit : Avec moins de charge sur le serveur, nous pouvons faire évoluer l’application plus efficacement et cela nécessite moins de coûts pour servir le même nombre d’utilisateurs, plus nous transformons de demandes côté serveur en accès au stockage côté client.
3. Utilisation réduite de la bande passante : Dans le cas d’une application principalement utilisée à partir d’appareils mobiles, vous économisez de l’argent sur les forfaits de données de téléphonie mobile de l’utilisateur ou sur l’utilisation de la bande passante en stockant les données sur le client.
4. Sécurité des données: Si nous souhaitons stocker des informations liées à un utilisateur spécifique, nous devons être prudents lors du stockage des données sur le serveur. Nous devons contribuer à le protéger contre les attaques. Lorsque nous stockons les informations côté client, c’est principalement le problème de l’utilisateur. Prenons l’exemple de l’historique de recherche d’une boutique en ligne dans laquelle une certaine catégorie de produits révèle des informations sur l’état de santé personnel d’une personne.

La première raison de la liste est la plus courante. Cependant, il arrive parfois que plusieurs raisons justifient l’utilisation du stockage côté client au lieu d’écrire les informations dans la base de données.

Stockage local et stockage de session

Avant de mettre en œuvre une solution, nous devons comprendre les termes stockage local et stockage de session. Les navigateurs modernes fournissent ces deux types de stockage de navigateur intégré.

Le stockage local conserve les données même après la fermeture du navigateur (onglet). Comme son nom l’indique, il les stocke sur la machine locale et offre jusqu’à 10 Mo d’espace pour vos données par domaine. Plusieurs onglets ou fenêtres de navigateur avec le même domaine partagent le même stockage local.

Le stockage de session conserve les données pour une seule session et un seul onglet de navigateur. Plusieurs onglets du navigateur ont leur stockage de session respectif. Comme le stockage local, sa taille est limitée à environ 10 Mo.

Les restrictions et caractéristiques font du stockage local une solution idéale pour stocker les paramètres, les préférences utilisateur et les informations sur l’ordre des colonnes.

Le stockage de session est idéal pour stocker des articles dans un panier ou d’autres informations qui doivent être supprimées lorsque l’utilisateur quitte le site Web.

Écriture et données vers et depuis le stockage de session

Disons que nous souhaitons stocker un nombre aléatoire dans le stockage de session du navigateur.

Considérez la page Blazor suivante :

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@page "https://www.telerik.com/"

<PageTitle>Protected Browser Storage in Blazor Server</PageTitle>

<p>Generate your lucky number!</p>
<button type="button" @onclick="Generate">Generate</button>

Your lucky number is: @LuckyNumber

@code {
    public int LuckyNumber { get; set; }
    private Random _random = new Random();
    
    protected override async Task OnInitializedAsync()
    {
        var result = await ProtectedSessionStore.GetAsync<int>("luckyNumber");
        if (result.Success)
        {
            LuckyNumber = result.Value;
        }
    }

    public async Task Generate()
    {
        LuckyNumber = _random.Next(1, 99);
        await ProtectedSessionStore.SetAsync("luckyNumber", LuckyNumber);
    }
}

Nous avons un button avec un associé Generate méthode appelée lorsque l’utilisateur appuie sur le bouton.

Le Generate la méthode utilise un objet de type Random et un objet du ProtectedSessionStorage tapez à partir du Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage espace de noms.

await ProtectedSessionStore.SetAsync("luckyNumber", LuckyNumber);

L’API permettant d’écrire des données dans le stockage de session du navigateur est simple. Nous utilisons l’asynchrone SetAsync méthode et fournissez une clé et une valeur comme arguments.

var result = await ProtectedSessionStore.GetAsync<int>("luckyNumber");
if (result.Success)
{
    LuckyNumber = result.Value;
}

La lecture des données à partir du stockage de session du navigateur est une processus en deux étapes. Tout d’abord, nous utilisons l’asynchrone GetAsync méthode et fournissez un type pour spécifier le type de résultat.

Ensuite, nous vérifions le Success propriété et accédez à la valeur en utilisant le Value propriété.

Le code est identique lorsque vous utilisez le stockage local au lieu du stockage de session. La seule différence est qu’au lieu d’injecter une instance du ProtectedSessionStoragevous utiliseriez le ProtectedLocalStorage.

Indice: Pour que cet exemple simplifié fonctionne, nous devons désactiver le prérendu. La raison en est que nous ne pouvons pas exécuter JavaScript pendant le prérendu car il n’y a pas encore de sites Web dans le navigateur et nous devons appeler l’API JavaScript pour accéder aux API de stockage du navigateur.

Pour désactiver le prérendu, nous devons configurer le HeadOutlet et le Routes composants dans le App.razor fichiers en conséquence:

<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />

Gérer le prérendu dans Blazor Server

La solution présentée dans le chapitre précédent fonctionne, mais ne prend pas en charge le prérendu.

Dans ce chapitre, nous mettrons en œuvre une solution qui correctement gère le prérendunous permettant d’utiliser l’un des principaux avantages de l’utilisation de Blazor Server.

Avec le prérendu activé, le code de notre composant est légèrement différent :

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedSessionStorage ProtectedSessionStore

@page "https://www.telerik.com/"

<PageTitle>Protected Browser Storage in Blazor Server</PageTitle>

@if (IsConnected)
{
    <p>Generate your lucky number!</p>
    <button type="button" @onclick="Generate">Generate</button>

    <p>Your lucky number is: @LuckyNumber</p>
}
else
{
    <p>Loading...</p>
}

@code {
    public int LuckyNumber { get; set; }
    public bool IsConnected { get; set; }
    private Random _random = new Random();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            IsConnected = true;

            var result = await ProtectedSessionStore.GetAsync<int>("luckyNumber");
            if (result.Success)
            {
                LuckyNumber = result.Value;
            }

            StateHasChanged();
        }
    }

    public async Task Generate()
    {
        LuckyNumber = _random.Next(1, 99);
        await ProtectedSessionStore.SetAsync("luckyNumber", LuckyNumber);
    }
}

Le Generate la méthode est la même. Cependant, le modèle de composant a désormais une condition et vérifie la IsConnected propriété pour décider s’il faut restituer les informations de chargement ou le bouton.

Les changements les plus importants se produisent dans le code du composant.

Tout d’abord, nous déplaçons le code qui accède au magasin de sessions lors du chargement du composant depuis le OnInitializedAsync au OnAfterRenderAsync méthode du cycle de vie.

La raison est que le OnAfterRenderAsync La méthode est déclenchée lorsque la page a été rendue et fournit un argument indiquant s’il s’agit du premier cycle de rendu du composant.

Nous vérifions ensuite le firstRender argument et définir le IsConnected propriété à true, ce qui déclenche le rendu du bouton dans le code du composant. Dans ce cas, nous devons appeler le StateHasChanged méthode pour déclencher un rendu de la page.

Avec ces petites modifications appliquées, nous avons introduit une certaine imbrication dans notre code, mais du côté positif, nous gérons désormais correctement le prérendu de Blazor Server.

Stockage protégé du navigateur ASP.NET Core

Lorsque vous utilisez des types de Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage espace de noms, tel que le ProtectedLocalStorage et le ProtectedSessionStoragenous utilisons un stockage protégé, comme son nom l’indique.

Stockage protégé du navigateur ASP.NET Core utilise la protection des données pour crypter les informations stockées dans le navigateur. Il limite l’accès aux informations de l’application et empêche tout accès extérieur, comme l’utilisation d’outils de développement et la manipulation des données.

Lors de l’exécution de l’exemple de code évoqué précédemment dans cet article, le stockage du navigateur ressemble à ceci :

Comme vous pouvez le voir, la clé est stockée en texte brut. C’est tout à fait logique puisque nous identifions les données par leur clé. Cependant, la valeur est cryptée et le nombre aléatoire que nous stockons est stocké dans le stockage de session sous la forme d’une chaîne de 134 caractères.

Problèmes lorsque vous travaillez avec le stockage du navigateur

Il y a quelques pièges qui se cachent lorsque l’on travaille avec le stockage du navigateur.

• Semblables au stockage des données sur le serveur, les API du navigateur permettant d’accéder au stockage du navigateur sont asynchrones. Cela introduit une certaine complexité à l’application Web.
• Concernant le premier écueil, nous ne pouvons pas accéder au stockage du navigateur pendant le prérendu de Blazor car le prérendu se produit sur le serveur. Par conséquent, il n’existe pas encore de site Web pouvant accéder aux API du navigateur.

Et, bien sûr, nous devons tenir compte de la limitation de la taille des données lorsque nous décidons de stocker les informations côté client ou de les envoyer au serveur.

Stockage du navigateur dans Blazor WebAssembly

L’exemple présenté dans cet article utilise Blazor Server.

L’API de stockage du navigateur protégé ASP.NET Core est une API réservée au serveur et peut donc être utilisé uniquement pour Blazor Server.

En ce qui concerne Blazor WebAssembly, il existe deux solutions :

1. Vous pouvez implémenter manuellement un wrapper autour de l’interopérabilité JavaScript pour accéder aux API de stockage de session et de stockage local du navigateur.
2. Vous utilisez l’une des bibliothèques Blazor open source tierces existantes, telles que Stockage local de Blazored.

Conclusion

L’écriture de données côté client plutôt que côté serveur présente différents avantages en fonction du cas d’utilisation. Les plus importants sont charge de serveur réduite et meilleure réactivité (pas de latence réseau).

En utilisant le Stockage protégé du navigateur ASP.NET Core, implémenter une solution pour Blazor Server est simple. Lorsqu’il est effectué correctement, il prend également en charge le prérendu de Blazor Server.

Pour Blazor WebAssemblynous devons implémenter le wrapper JavaScript Interop ou nous appuyer sur une solution tierce pour accéder à l’API de stockage du navigateur.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.