Local storage for Blazor Server 8

Question

I am encountering some issues configuring local storage in Blazor .NET Core 8. After updating my project, I found that since the pages are now created on the server, it's not possible to access the browser's local storage.

I have tried using Blazored Local Storage, JavaScript, and ProtectedSessionStorage, but none seem to be effective. Additionally, I attempted to configure the page to not pre-render in the following manner:

@rendermode @(new InteractiveServerRenderMode(prerender:false))

I use the local storage a lot to update the cart shop from the website.

Any ideas?

Regards, Jair

Here's a video of what happend when I try to create a shop cart using the local storage

https://somup.com/cZeFlFCjbr

I have the use the local storage during the process because is how i send the information between pages. My code bellow:

In this part I call the method cart

This is the local storage service

Answer 1

You could use ProtectedLocalStorage in blazor server rendermode, Just try following in a per page/component project:

@page "/"
@rendermode @(new InteractiveServerRenderMode(false))
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedLocalStorage ProtectedLocalStore
@value
@code {
    int value;
    protected override async Task OnInitializedAsync()
    {
        await ProtectedLocalStore.SetAsync("count", 7);       //set value to localstorage
        var result = await ProtectedLocalStore.GetAsync<int>("count");   //get value to localstorage
        value = result.Value;
    }
}

Test result:

Answer 2

Simplifying method calls by removing unnecessary parameters or specifications reduces the risk of errors during code modifications. If the return type of GetLocalDataAsync ever changes, the impact on the calling code is minimized, as type expectations are managed within the method itself.

public class LocalDataService
{
    private readonly ProtectedLocalStorage _protectedLocalStorage;
    
    public LocalDataService(ProtectedLocalStorage protectedLocalStorage)
    {
        _protectedLocalStorage = protectedLocalStorage;
    }

    public async Task StoreLocalDataAsync(string data)
    {
        await _protectedLocalStorage.SetAsync("localdata", data);
        
    }

    public async Task<string> GetLocalDataAsync()
    {
        var result = await _protectedLocalStorage.GetAsync<string>("localdata");
        return result.Success ? result.Value : null;
    }
}

Program.cs

builder.Services.AddScoped<LocalDataService>();

For controlling prerendering, you typically adjust this at the application level or use conditional logic within the component to manage rendering (InteractiveServerRenderMode) behaviors, especially for server-side Blazor.

Page.cshtml

@page "/"

@rendermode @(new InteractiveServerRenderMode(false))

@inject LocalDataService localDataService

@code {
    protected override async Task OnInitializedAsync()
    {
 await localDataService.StoreLocalDataAsync(Data);
 var result = await localDataService.GetLocalDataAsync<string>(); 
    }
}