Manejo de Local Storage en Blazor

El manejo de datos en sesión o datos compartir trasversalmente dentro de una aplicación web es algo bastante común y necesario.

El local storage en los navegadores nos permite guardar datos que pueden ser utilizados en todo el contexto de nuestra página y actualizados según se requiera.

Blazor no tiene un soporte nativo para realizar esta actualización ya que Web assembly aún no cuenta con estas funciones. Sin embargo podemos solucionarlo de varias maneras.

1. Utilizar interpolación con Javascript

Primero debemos crear una funciona para guardar y otra para obtener los datos del storage dentro de un archivo JS

window.setToStorage = function setToStorage(name, value) {
localStorage.setItem(name, value);
}

window.getToStorage = function getToStorage(name, value) {
localStorage.getItem(name, value);
}

Luego utilizando IJSRuntime podemos hacer la llamada de esas funciones en código C#

 return await JSRuntime.InvokeAsync("setToStorage", "sessionToke", token);

2. Utilizando la libreria Blazored LocalStorage

La librería más simple para el manejo de local storage disponible en este momento. Primero la instalamos como cualquier paquete nuget

dotnet add package Blazored.LocalStorage --version 3.0.0

Agregamos la configuración del servicio. Podemos especificar algunas propiedades configuración también.

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");

    builder.Services.AddBlazoredLocalStorage(config =>
        config.JsonSerializerOptions.WriteIndented = true);

    await builder.Build().RunAsync();
}

luego entonces podemos inyectar la dependencia en el componente que lo necesitemos y utilizar los métodos para obtener y guardar datos en local storage

@inject Blazored.LocalStorage.ILocalStorageService localStorage

@code {

    protected override async Task OnInitializedAsync()
    {
        await localStorage.SetItemAsync("name", "John Smith");
        var name = await localStorage.GetItemAsync<string>("name");
    }

}