CODEWITHSUNDEEP
.net-corestorageblazor
baer999
baer999

Reputation: 972

Blazor .Net server side where to load LocalStorage data

I use Blazor Preview 9 server side on .NET Core 3.0 and also the nuget package Blazored.LocalStorage for loading and saving data in Local Storage of the browser.

Now I want to load it ONCE time when required when loading the application.

For this I need to use OnFirstRenderer because it has to be on client side completely to access it's browser cache. Right now I use the page "/" (Index.razor) for it but I'm not pretty sure if this is the correct anchor or way for doing this:

[Parameter]
public string Test { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    try
    {
        if (firstRender)
        {
            await localStorage.SetItemAsync("TEST", "Hallo Welt");
        }

        if (Test == null)
        {
            Test = await localStorage.GetItemAsync<string>("TEST");
            StateHasChanged();
        }            
    }
    catch (Exception ex)
    {
        throw;
    }
}

Also I don't know how to make this available for all components:

is it best way to make a service with global variables and inject it into each component or doing it via CascadingValue method?

Thx!

Upvotes: 4

Views: 3710

Answers (1)

Chris Sainty
Chris Sainty

Reputation: 8521

OnAfterRender is now only called when the component is initialized and you can perform JS interop (it will be called every time the component is re-rendered after that - but firstRender will be false). So if you only want to load a value once from local storage you can do it during the firstRender as per the example below.

[Parameter]
public string Test { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        Test = await localStorage.GetItemAsync<string>("TEST");
    }         
}

In terms of making the value available to all components, you can either use a global state class or provide it via a cascading parameter. Either option will work and I don't really see one as better than the other, all I'd say is if you need other bits kept in state then use a state class, if you don't then probably go with a cascading parameter.

As per Mister Magoo's comment - it would be best to do this in the App.razor component so it would be loaded even in deep linking scenarios.

Upvotes: 7

Related Questions