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" @>
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.
 
 
CRUD Using Blazor, Entity Framework Core And Dapper
 
Sorting Table In Blazor
 
Pagination In Blazor
 
Searching Feature In Blazor
 
Validation In Blazor Application
 
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.