Blazor Page Loaded before localstorage executes and fails to refresh

My simple blazor.razor page can read local storage but seems to do after page is displayed. It takes a button to retrieve value. Seems like I should be able to force a refresh. But how ?

<h3>LocalStorageWithBlazoredStorage</h3>
@if (storeValue!=null && storeValue.Length>0)
{
    <p> Current stored value is  @storeValue.</p>
}
else
{
    <p> Current stored value for user not set</p>
}
<p>Remember for 2 weeks or be subject to 2 factor authentication each time</p>

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" onclick="@SaveTwoFactorContactInfo" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
        Remember this computer
    </label>
</div>

<button type="button" class="btn-success" onclick="@ReadLocalStorage">Read Local Storage</button>


@code {

    private string storeValue = string.Empty;

    private ContactInfo twoFacInfo = new ContactInfo();
    private const string TwoFactor = "TwoFactorVerifInfo";
    private void SaveTwoFactorContactInfo()
    {


        // persist an object
        ContactInfo twoFacInfo = new ContactInfo
        {
                LastName = "Jones",
                TextNumber = "425-123-4567",
                trustThisPc = true
        };



        localStorage.SetItemAsync(TwoFactor, twoFacInfo);

    }

    private async Task ReadLocalStorage()
    {
        twoFacInfo = await localStorage.GetItemAsync<ContactInfo>(TwoFactor);
        storeValue = $"Stored value for {twoFacInfo.LastName} {twoFacInfo.TextNumber} chose trust this PC : {twoFacInfo.trustThisPc}";
    }

    protected override async Task OnInitializedAsync()
    {
        ReadLocalStorage();// page start
    }

    protected async override Task OnAfterRenderAsync(bool firstRender)   // this doesnt update the page on load either 
    {    // this fires again when click is done, firstRender is false but storeValue already loaded
        if (firstRender)
        {
            twoFacInfo = await localStorage.GetItemAsync<ContactInfo>(TwoFactor);
            storeValue = $"Stored value for {twoFacInfo.LastName} {twoFacInfo.TextNumber} chose trust this PC : {twoFacInfo.trustThisPc}";
            Console.WriteLine(" Ok");
           
        }
    }type here

A breakpoint shows page displayed and OnAfterRenderAsync fires but seems to late...
2nd how can I read the value firstRender. ? Is it possible to read

Expecting to not use a button to retrieve localStorage values
Googled StackOverflow came upon similar issue...but only seems to work if called again...

Heyo, you're right that the local storage is being accessed after the page loads, because that's exactly what you've programmed to happen. The OnAfterRender method is fired after the page has rendered/loaded. Why don't you access the local storage in the OnInitialized or, since you seem to need the Async, OnInitializedAsync?

Also, to answer your question of
> how can I read the value firstRender. ? Is it possible to read

Yes, it's possible to read, you can use a Console.WriteLine(FirstRender) for that and it'll show in your website's console. However there's no reason to read it if you know what it does. The bool FirstRender is of value true on the very first render of the page, so when the page is initially visible to the user.

Also, I noticed your OnInitalized method was wrong; no big deal. You just need to await your ReadLocalStorage method because it is of type async Task

protected override async Task OnInitializedAsync()
{
    await ReadLocalStorage();// page start
}

Your comments also say
> this doesnt update the page on load either

And if that's true, you should be able to add a StateHasChanged method to your OnAfterRender method. I'll show it here:

    protected async override Task OnAfterRenderAsync(bool firstRender)   // this doesnt update the page on load either 
    {    // this fires again when click is done, firstRender is false but storeValue already loaded
        if (firstRender)
        {
            twoFacInfo = await localStorage.GetItemAsync<ContactInfo>(TwoFactor);
            storeValue = $"Stored value for {twoFacInfo.LastName} {twoFacInfo.TextNumber} chose trust this PC : {twoFacInfo.trustThisPc}";
            Console.WriteLine(" Ok");
            StateHasChanged();
        }
    }

The StateHasChanged method is provided by ASP.NET and it essentially tells Blazor to reload the components because something has changed that can effect them.

Hope this helps!