TinyBase logoTinyBase

createIndexedDbPersister

The createIndexedDbPersister function creates an IndexedDbPersister object that can persist a Store to the browser's IndexedDB storage.

createIndexedDbPersister(
  store: Store,
  dbName: string,
  autoLoadIntervalSeconds?: number,
  onIgnoredError?: (error: any) => void,
): IndexedDbPersister
TypeDescription
storeStore

The Store to persist.

dbNamestring

The unique key to identify the IndexedDB to use.

autoLoadIntervalSeconds?number

How often to poll the database when in 'autoLoad' mode, defaulting to 1.

onIgnoredError?(error: any) => void

An optional handler for the errors that the Persister would otherwise ignore when trying to save or load data. This is suitable for debugging persistence issues in a development environment.

returnsIndexedDbPersister

A reference to the new IndexedDbPersister object.

An IndexedDbPersister only supports regular Store objects, and cannot be used to persist the metadata of a MergeableStore.

As well as providing a reference to the Store to persist, you must provide a dbName parameter which is unique to your application. This is the key used to identify which IndexedDB to use.

Within that database, this Persister will create two object stores: one called 't', and one called 'v'. These will contain the Store's tabular and key-value data respectively, using 'k' and 'v' to store the key and value of each entry, as shown in the example.

Note that it is not possible to reactively detect changes to a browser's IndexedDB. If you do choose to enable automatic loading for the Persister (with the startAutoLoad method), it needs to poll the database for changes. The autoLoadIntervalSeconds method is used to indicate how often to do this.

Example

This example creates a IndexedDbPersister object and persists the Store to the browser's IndexedDB storage.

import {createIndexedDbPersister} from 'tinybase/persisters/persister-indexed-db';
import {createStore} from 'tinybase';

const store = createStore()
  .setTable('pets', {fido: {species: 'dog'}})
  .setTable('species', {dog: {price: 5}})
  .setValues({open: true});
const persister = createIndexedDbPersister(store, 'petStore');

await persister.save();
// IndexedDB ->
//   database petStore:
//     objectStore t:
//       object 0:
//         k: "pets"
//         v: {fido: {species: dog}}
//       object 1:
//         k: "species"
//         v: {dog: {price: 5}}
//     objectStore v:
//       object 0:
//         k: "open"
//         v: true

persister.destroy();

Since

v4.2.0