TG.Blazor.IndexedDB 1.5.0-preview

.NET Standard 2.0
This is a prerelease version of TG.Blazor.IndexedDB.
Install-Package TG.Blazor.IndexedDB -Version 1.5.0-preview
dotnet add package TG.Blazor.IndexedDB --version 1.5.0-preview
<PackageReference Include="TG.Blazor.IndexedDB" Version="1.5.0-preview" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add TG.Blazor.IndexedDB --version 1.5.0-preview
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: TG.Blazor.IndexedDB, 1.5.0-preview"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install TG.Blazor.IndexedDB as a Cake Addin
#addin nuget:?package=TG.Blazor.IndexedDB&version=1.5.0-preview&prerelease

// Install TG.Blazor.IndexedDB as a Cake Tool
#tool nuget:?package=TG.Blazor.IndexedDB&version=1.5.0-preview&prerelease
The NuGet Team does not provide support for this client. Please contact its maintainers for support.


This is a Blazor library for accessing IndexedDB and uses Jake Archibald's idb library for handling access to IndexedDB on the JavaScript side.

This version currently provides the following functionality:

  • Open and upgrade an instance of IndexedDB, creating stores
  • Add and update a record to/in a given store
  • Delete a record from a store
  • Retrieve all records from a given store
  • Retrieve a record/or records from a store by index and value if the index exists
  • Add a new store dynamically
  • Works both with server-side Blazor and client-side Blazor

It does not, at the moment, support aggregate keys, searches using a range and some of the more obscure features of IndexedDB.

Using the library

  1. Install the Nuget package TG.Blazor.IndexedDB (Install-Package TG.Blazor.IndexedDB -Version 1.5.0-preview)
  2. create a new instance of DbStore
  3. add one or more store definitions
  4. Add the following script reference to your Index.html after the blazor.webassembly.js reference: <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
  5. Inject the created instance of IndexedDbManger into the component or page where you want to use it

The library provides a service extension to create a singleton instance of the DbStore.

Within the client application's startup.cs file, add the following to the ConfigureServices function.

services.AddIndexedDB(dbStore =>
                dbStore.DbName = "TheFactory"; //example name
                dbStore.Version = 1;

            dbStore.Stores.Add(new StoreSchema
                Name = "Employees",
                PrimaryKey = new IndexSpec { Name = "id", KeyPath = "id", Auto = true },
                Indexes = new List<IndexSpec>
                        new IndexSpec{Name="firstName", KeyPath = "firstName", Auto=false},
                        new IndexSpec{Name="lastName", KeyPath = "lastName", Auto=false}

                dbStore.Stores.Add(new StoreSchema
                    Name = "Outbox",
                    PrimaryKey = new IndexSpec { Auto = true }

A breakdown of what this does

Step 1 - define the database

To define the database we need to first give it a name and set its version. IndexedDB uses the version to determine whether it needs to update the database. For example if you decide to add a new store then increment the version to ensure that the store is added to the database.

Step 2 - Add a store(table) to the database

In IndexedDB a store is equivalent to table. To create a store we create a new StoreSchema and add it to the collection of stores.

Within the StoreSchema we define the name of the store, the primary index key and optionally a set of foreign key indexes if required.

The IndexSpec is used to define the primary key and any foreign keys that are required. It has the following properties:

  • Name - the name of the index
  • KeyPath - the identifier for the property in the saved object/record that is to be indexed
  • Unique - defines whether the key value must be unique
  • Auto - determines whether the index value should be generated by IndexedDB.

In the example above for the "Employees" store the primary key is explicitly set to the keypath "id" and we want it automatically generated by IndexedDB. In the "Outbox" store the primary key just has Auto = true set. IndexedDB is left to handle the rest.

Using IndexedDBManager

For the following examples we are going to assume that we have Person class which is defined as follows:

 public class Person
        public long? Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }


And the data store name is "Employees"

Accessing IndexedDBManager

To use IndexedDB in a component or page first inject the IndexedDbManager instance.

@inject IndexedDBManager DbManager

Setting up notifications

IndexedDBManager exposes ActionCompleted event that is raised when an action is completed.

If you want to receive notifications in the ```OnInit()`` function subscribe to the event.

The function that handles the event should have the following signature:

 private void OnIndexedDbNotification(object sender, IndexedDBNotificationArgs args)
        Message = args.Message;

It is recommended that your page or component should also implement IDisposable to unsubscribe from the event.

Adding a record to an IndexedDb store

Assuming we have a new instance of our sample Person class, to add to the "Employees" store doing the following:

var newRecord = new StoreRecord<Person>
            Storename ="Employees",
            Data = NewPerson

await DbManager.AddRecord(newRecord);

Getting all records from a store

 var results = await DbManager.GetRecords<Person>("Employees");

Get record by Id

To get a record using the id can be done as follows:

 CurrentPerson = await DbManager.GetRecordById<long, Person>(DbManager.Stores[0].Name, id);

getting a record using the index

To search for a value on an index first create an instance of StoreIndexQuery<TInput> providing the name of the store to search in, the index to search on and the value to search for.

var indexSearch = new StoreIndexQuery<string>
            Storename = DbManager.Stores[0].Name,
            IndexName = SelectedIndex,
            QueryValue = SearchString,

The StoreIndexQuery is then passed to the function IndexedDbManager.GetRecordByIndex<TInput, TResult>() where TInput is the type of the value to search for and TRresult is the type of the return value.

 var result = await DbManager.GetRecordByIndex<string, Person>(indexSearch);

            if (result is null)

By default IndexedDB only returns the first record found that matches the query. If you want to get all of the records that match the query value use the following:

 var result = await DbManager.GetAllRecordsByIndex<string, Person>(indexSearch);

if (result is null)

Updating a record

To update a record call IndexedDbManager.UpdateRecord<T>(StoreRecord<T> recordToUpdate).

Deleting a record

To delete a record call IndexedDbManager.DeleteRecord<TInput>(string storeName, TInput id).

Clear all records from a store

To clear all the records in a store call the following function IndexedDbManager.ClearStore(string storeName).

Deleting a Database

If you are so inclined you can delete an entire database with the following function IndexedDbManager.DeleteDb(string dbName).

Adding a new store dynamically

If you have occasion to what to add a store when the program is up and running. The following

var newStoreSchema = new StoreSchema
        Name = NewStoreName,
        PrimaryKey = new IndexSpec { Name = "id", KeyPath = "id", Auto = true },

    await DbManager.AddNewStore(newStoreSchema);

What this will do is, if the store doesn't already exist, is increment the database version number and add the store to the database.

Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows
.NET Core netcoreapp2.0 netcoreapp2.1 netcoreapp2.2 netcoreapp3.0 netcoreapp3.1
.NET Standard netstandard2.0 netstandard2.1
.NET Framework net461 net462 net463 net47 net471 net472 net48
MonoAndroid monoandroid
MonoMac monomac
MonoTouch monotouch
Tizen tizen40 tizen60
Xamarin.iOS xamarinios
Xamarin.Mac xamarinmac
Xamarin.TVOS xamarintvos
Xamarin.WatchOS xamarinwatchos
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (4)

Showing the top 4 NuGet packages that depend on TG.Blazor.IndexedDB:

Package Downloads

A Blazor framework for interacting with IndexedDB


A Blazor library for accessing IndexedDB


A Blazor web assembly for interacting with IndexedDB


An easy way to interact with IndexedDB and make it feel like EF Core but `async` for Blazor

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on TG.Blazor.IndexedDB:

Repository Stars
Library for creating DotNet Web Worker threads/multithreading in Client side Blazor
Version Downloads Last updated
1.5.0-preview 32,573 1/8/2020
1.2.1-preview 1,114 10/7/2019
1.2.0-preview 250 9/17/2019
1.1.0-preview 253 8/21/2019
1.0.0-preview 237 8/15/2019
0.9.0-beta 16,667 6/29/2019
0.6.0-beta 416 11/17/2018

Updated to work with both server and client-side Blazor