Blazor Server - How To Store Encrypted Session Data In The Browser

First, create a new Blazor Component named NewsAlert and type the following code,

@if (showAlert)
{
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        @Text
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" @onclick="OnDismiss">
            <span aria-hidden="true">×</span>
        </button>
    </div>
}

@code {
    private bool showAlert = false;

    [Parameter]
    public string Text { get; set; } = string.Empty;

    private async Task OnDismiss()
    {
        showAlert = false;
    }
}

This will be the basis for our component. To make this function to our requirements we need,

• Whenever the component is loaded, check sessionStorage to see if the alert has ever been dismissed. If it hasn't, then show it
• When the user dismisses the alert, we need to store that data in sessionStorage for the next time the component is loaded during this session.

To check sessionStorage after the component has been loaded, we can write,

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var result = await storage.GetAsync<bool>("NewsAlert.showAlert");

    bool oldValue = showAlert;

    showAlert = result.Success ? result.Value : true;

    if (showAlert != oldValue)
    {
        StateHasChanged();
    }
}

Let's break down this method.

• First, we're asking for a bool called NewsAlert.showAlert in sessionStorage.
• Next, we're keeping a copy of the showAlert value so that later we can check if it actually changed.
• Then we set the value of showAlert. If there is a value with that key, then set it to that value. Otherwise, it defaults to true.
• Finally, if the value has changed, invoke the StateHasChanged() method, which tells Blazor we've changed the component state.

Note. Using StateHasChanged() can potentially force the entire component to redraw, so be mindful of its usage. Typically you should never explicitly call this method, but since we're changing the state immediately after the component is rendered, it won't update the state unless we invoke it. You might be asking why we don't use OnInitializedAsync instead, to avoid this issue. This is because Blazor seemingly doesn't like it when we do JS interop inside OnInitializedAsync(). There is a special runtime error when you do it, that says to use OnAfterRender instead.

Now finally we need to update sessionStorage when the user dismisses the alert,

private async Task OnDismiss()
{
    showAlert = false;
    await storage.SetAsync("NewsAlert.showAlert", false);
}

The finished component.

@inject ProtectedSessionStorage storage

@if (showAlert)
{
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        @Text
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" @onclick="OnDismiss">
            <span aria-hidden="true">×</span>
        </button>
    </div>
}

@code {
    private bool showAlert = false;

    [Parameter]
    public string Text { get; set; } = string.Empty;

    private async Task OnDismiss()
    {
        showAlert = false;
        await storage.SetAsync("NewsAlert.showAlert", false);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var result = await storage.GetAsync<bool>("NewsAlert.showAlert");
        bool oldValue = showAlert;
        showAlert = result.Success ? result.Value : true;

        if (showAlert != oldValue)
        {
            StateHasChanged();
        }
    }
}

You can now feel free to use this component like so,

<NewsAlert Text="This is some news text" />

Summary

Although it must be used responsibly, client-side browser storage can prove very useful in your project! With Blazor Server and .NET 5, using this browser storage with your server-side components has never been easier.

Happy coding! Stay safe everyone.