A library to provide access to local storage in Blazor applications

You can install from NuGet using the following command:

Install-Package Blazored.LocalStorage

Or via the Visual Studio package manger.

You will need to register the local storage services with the service collection in your startup.cs file.

public void ConfigureServices(IServiceCollection services)
{
    services.AddBlazoredLocalStorage();
}

To use Blazored.LocalStorage in Blazor WebAssembly, inject the ILocalStorageService per the example below.

@inject Blazored.LocalStorage.ILocalStorageService localStorage

@code {

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

}

With Blazor WebAssembly you also have the option of a synchronous API, if your use case requires it. You can swap the ILocalStorageService for ISyncStorageService which allows you to avoid use of async/await. For either interface, the method names are the same.

@inject Blazored.LocalStorage.ISyncStorageService localStorage

@code {

    protected override void OnInitialized()
    {
        localStorage.SetItem("name", "John Smith");
        var name = localStorage.GetItem<string>("name");
    }

}

NOTE: Due to pre-rendering in Blazor Server you can't perform any JS interop until the OnAfterRender lifecycle method.

@inject Blazored.LocalStorage.ILocalStorageService localStorage

@functions {

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

}

The APIs available are:

• asynchronous via ILocalStorageService:
  • SetItemAsync()
  • GetItemAsync()
  • RemoveItemAsync()
  • ClearAsync()
  • LengthAsync()
  • KeyAsync()
• synchronous via ISyncStorageService:
  • SetItem()
  • GetItem()
  • RemoveItem()
  • Clear()
  • Length()
  • Key()

Note: Blazored.LocalStorage methods will handle the serialisation and de-serialisation of the data for you.