How do I use IndexedDB in Blazor WebAssembly?

IndexedDB is used for the client-side storage of data and files. Follow these steps to use IndexedDB in Blazor WebAssembly:

1. Create a Blazor WebAssembly app and install the Reshiru.Blazor.IndexedDB.Framework NuGet package using the NuGet package manager.

2. Set up the IIndexedDbFactory configuration service in your Program.cs file and set it as scoped.
   [Program.cs]
   

   using Blazor.IndexedDB.Framework;
   public class Program
    {
         public static async Task   Main(string[] args)
         {
                 builder.Services.AddScoped<IIndexedDbFactory,   IndexedDbFactory>();
           }
    }

3. Now add the properties inside the class to store and process data in the Data folder.
   [IndexDb.cs]  
   

   using Blazor.IndexedDB.Framework;
    using Microsoft.JSInterop;
    using   System.ComponentModel.DataAnnotations;
       
     namespace {{Your_App_Name}}.Data
      {
          public class IndexDb : IndexedDb
          {
              public IndexDb (IJSRuntime JSRuntime, string name, int   version) : base(JSRuntime,   name, version) { }
          
              public IndexedSet<Employee> Employees   { get; set; }
          }
       
          public class Employee
          {
              [Key]
              public long Id { get; set; }
       
              [Required]
              public string FirstName { get; set; }
       
              [Required]
              public string LastName { get; set; }
          }
      }
   

4. Add the namespace for the IndexedDB in _Import.razor file.
   [_Import.razor]
   

   @using Blazor.IndexedDB.Framework
   @using {{Your_App_Name}}.Data 

5. Add the Razor component to add and store the data using IndexedDB in the Index.razor file.
   [Index.razor]
   

   @page "/"
   @inject IIndexedDbFactory DbFactory
     
   <h1>Employees</h1>
   @if (employ != null)
    {
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First name</th>
                    <th>Last name</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var employee in employ)
                {
                    <tr>
                        <td>@employee.Id</td>
                        <td>@employee.FirstName</td>
                        <td>@employee.LastName</td>
                        <td><button @onclick="@(() => DeleteForm(employee))">Delete</button></td>
                    </tr>
                }
            </tbody>
        </table>
    }
     
    <fieldset>
        <legend>Add new person</legend>
        <EditForm Model="@newEmployee" OnValidSubmit="@SaveForm">
            <InputText placeholder="First name" @bind-Value="@newEmployee.FirstName" />
            <InputText placeholder="Last name" @bind-Value="@newEmployee.LastName" />
            <button type="submit">Add</button>
            <p><ValidationSummary /></p>
            <DataAnnotationsValidator />
        </EditForm>
    </fieldset>
     
    @code {
        Employee newEmployee = new Employee();
        List<Employee> employ;
     
        protected async Task OnInitializedAsync()
        {
            using var db = await DbFactory.Create<ExampleDb>();
            employ = db.Employees.ToList();
        }
     
        async Task SaveForm()
        {
            // Add employee details.
        }
     
        async Task DeleteForm(Employee person)
        {
            // Delete the employee.
        }
    } 

Refer to this blog for more details.