Local Storage in Blazor using Blazored

In this blog, you will learn about storing and retrieving values to the Browser's LocalStorage with the help of Blazored. The Blazored LocalStorage library helps to save data in Local Storage.

Let's see how to achieve this step by step.

Step 1:
First, you have to install the Blazored LocalStorage package. If you use Manage Package for Solution look for Blazored.LocalStorage and install the most current package. Otherwise, If you use 'Package Manager Console' then, run the following command.

Install-Package Blazored.LocalStorage -Version 4.1.2

Note:- When I write this blog, version 4.1.2 is the latest.

Step 2:

For Blazor WebAssembly

In this step, I have added an AddBlazoredLocalStorage() to the Main method in the Program.cs file.

Program.cs

using Blazored.LocalStorage;
public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
        builder.Services.AddBlazoredLocalStorage();

        await builder.Build().RunAsync();
    }
}

For Blazor Server

If you are using Blazor server app, register services.AddBlazoredLocalStorage(); in ConfigureServices method in Startup.cs file

Startup.cs

using Blazored.LocalStorage;
public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddBlazoredLocalStorage();
}

Step 3:
The following one is a razor page code. Here I have added a text box to collect data to store into the local storage. And two buttons, one to store the data and the other to receive data from local storage. Using @inject directive injected the Blazored.LocalStorage.ILocalStorageService interface. localStorage.SetItemAsync() method used to save the data. In the method, I have passed two parameters, key, and value. Finally, to retrieve the data, I have used localStorage.GetItemAsync() with the key parameter.

@page "/"

@inject Blazored.LocalStorage.ILocalStorageService localStorage

Enter Name:
<input @bind="name" />

<button type="button" class="btn btn-info" @onclick="Store">Store Name</button>
<br />
<br />
<button type="button" class="btn btn-info" @onclick="Retrieve">Get Name</button>
<br />
Retrieved Name: <span><b>@result</b></span>

@code {

    private string name;
    private string result;

    public async Task Store()
    {
        await localStorage.SetItemAsync("name", name);
    }

    public async Task Retrieve()
    {
        result = await localStorage.GetItemAsync<string>("name");
    }
}

Output
The following is an output of the above code. Here When the user inserts the name in the text box and clicks on the 'Store Name' button, it stores the value to the browser's local storage. Then when clicking the 'Get name' button, it retrieves the name from the browser's local storage.

I hope this helps you. Keep coding.