Blazored.LocalStorage in client service

Question

How can you inject Blazored.LocalStorage (v2.1.6) into a blazor webassembly service (3.2.0)?

Here is what we tried. Getting null error when trying to await LocalStorage.GetItemAsync.

App.razor

@using Blazored.LocalStorage

Program.cs

builder.Services.AddBlazoredLocalStorage();
builder.Services.AddSingleton<Services.UserService>();

Services/UserService.cs

namespace Test.Client.Services
{
    public class UserService
    {
        [Inject]
        private ILocalStorageService LocalStorage;
        private readonly HttpClient Http;

        public UserService(HttpClient _http)
        {
            Http = _http;
        }

        public async void LoginCallback()
        {
            string tkn = await LocalStorage.GetItemAsync<string>("tkn"); //Object null error here
        }
    }
}

Edit Solution: First, restart Visual Studio because it was holding onto something and would not work for anything until I did. Then as the marked answer shows, DI like so:

        private ILocalStorageService LocalStorage;
        private readonly HttpClient Http;

        public UserService(HttpClient _http, ILocalStorageService _localStorage)
        {
            Http = _http;
            LocalStorage = _localStorage;
        }

score 0 · Accepted Answer · answered Jul 07 '20 at 23:59

0

You must first inject using @inject <IService> <serviceInstanceName>

Example:

@using Blazored.SessionStorage
@inject ISessionStorageService sessionStorageService
...
@code
{
     var eml = sessionStorage.sessionStorageService.GetItemAsync<string>("emailAddress");
}

EDIT: Sorry I misinterpreted. The above is to inject session storage to a razor page. If you wanted to inject into a class you do below:

public class SomeClass
{
    private ISessionStorageService _sessionStorageService;
        

    // inject in the class constructor
    public SomeClass(ISessionStorageService sessionStorageService)
    {
        _sessionStorageService = sessionStorageService;
    }
}

This is on top of registering the service in your Program.cs (in Client) which you have done already.

answered Jul 07 '20 at 23:59

mend0k

481
5
12

Thank you. I actually tried it this way and my example way and both failed. Turns out I had to restart my whole computer as Visual Studio (19) was holding onto some sort of cache causing the errors. Once I restarted, then I could do it the way you showed here. One thing though, you must be using a different Blazored library or version because ISessionStorageService doesn't exist in the one I am talking about -- it is ILocalStorageService. I'll go ahead and mark this as answered though. – Zack Jul 08 '20 at 21:30
@Zack Actually there are multiple types of storage services provided by Blazored. Session storage persists (user state) only in the current browsing session as it's only stored in the browser cache, local storage persists even if you close your current browsing session/open a new tab as it's stored in your local machine's temp folder (iirc). Hope that helps :) – mend0k Jul 08 '20 at 21:39
Yes, I mean that it was throwing C# runtime null reference errors until I restarted VS -- no matter if I had stuff in the browser storage or not. I couldn't get it to run to store anything in other words. I read others having the same issues with webassembly. – Zack Jul 08 '20 at 21:52

score 0 · Answer 2 · answered Jul 09 '20 at 18:57

I encountered the same issue and tried restarting my Visual Studio, as well as my computer, both didn't help, but then found this somewhat related post: https://github.com/dotnet/aspnetcore/issues/10143

Apparently, we need to check for null if the data is being fetched in the OnInitializedAsync function, just like in the FetchData.razor example:

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{

Blazored.LocalStorage in client service

2 Answers2