Use LocalStorage In Blazor

In this article, we will learn how we can use or save values in LocalStorage. We will use Blazor.LocalStorage package to use LocalStorage in Blazor.

What is Local Storage?

As the name suggests, its save/store data in client local machine, Its also known as DOM storage.

As I said above to use local storage we will use Blazor.LocalStorage package, to install this you need to execute below command in Package Manager Console or find Blazor.LocalStorage in Nuget-Solution.

Install-Package Blazored.LocalStorage

Once you installed successfully you need to register its service in Startup class. Which is available in your blazor server application.

To Register service, you need to include the following namespace.

using Blazored.LocalStorage;

Next, register the service in the ConfigureServices() method of Startup class.

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

Now we have done with registration service.

Import following namespace _Imports.razor file. This will allow us to use LocalStorage in each component without importing directive for each component.

@using Blazored.LocalStorage;

Now, we can use LocalStorage collection in any component. We will use the Index.razor file for this article.

Open Index.razor file from the pages folder and paste the following content.

@page "/"
@inject Blazored.LocalStorage.ILocalStorageService localStore

<input type="text" @bind="localStorageValue" />
<br /><br />
<button class="btn btn-primary" @onclick="UpdateLocalStorageValue">Save</button>
<button class="btn btn-danger" @onclick="ClearLocalStorageValue">Clear</button>

@code{

    const string localStoragekey = "myKey";
    string localStorageValue;

    public async void UpdateLocalStorageValue()
    {
        await localStore.SetItemAsync(localStoragekey, localStorageValue);
    }

    public async void ClearLocalStorageValue()
    {
        localStorageValue = string.Empty;
        await localStore.ClearAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            localStorageValue = await localStore.GetItemAsync<string>(localStoragekey);
            StateHasChanged();
        }
    }
}

We can save any value in local storage using following method.

SetItemAsync("Key", "Any Object/Values")

If you wanna retrieve values from local storage you need to following method.

GetItemAsync<string>("Your localstorage key name")

Using following method we can clear local storage values.

ClearAsync()

Output

Recommend articles which you should read once.

  1. CRUD Using Blazor, Entity Framework Core And Dapper
  2. Sorting Table In Blazor
  3. Pagination In Blazor
  4. Searching Feature In Blazor
  5. Validation In Blazor Application
  6. Deploy A Blazor Application On IIS

hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.

1 Comment

  1. Pavan

    Can we access localstorage values like using GetItemAsync function to get value from a c# class ?

    0
    0
    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories