indexeddb
Reactive icon

IndexedDB

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 06 January 2020
 by 
0.0
 (0 ratings)
indexeddb

IndexedDB

Documentation
1.0.0

Welcome to the IndexedDB Documentation!

As you saw in the Overview tab, this component provides actions to manage IndexedDB. But before we start, let's take a quick look on the terms

IndexedDB Terms

Database - This is the highest level of IndexedDB. It contains the object stores, which in turn contain the data you would like to persist. You can create multiple databases with whatever names you choose, but generally there is one database per app.

Object store - An object store is an individual bucket to store data. You can think of object stores as being similar to tables in traditional relational databases. Typically, there is one object store for each 'type' (not JavaScript data type) of data you are storing. For example, given an app that persists blog posts and user profiles, you could imagine two object stores. Unlike tables in traditional databases, the actual JavaScript data types of data within the store do not need to be consistent (for example, if there are three people in the 'people' object store, their age properties could be 53, 'twenty-five', and unknown ).

Index - An Index is a kind of object store for organizing data in another object store (called the reference object store) by an individual property of the data. The index is used to retrieve records in the object store by this property. For example, if you're storing people, you may want to fetch them later by their name, age, or favorite animal.

More information can be found here: https://developers.google.com/web/ilt/pwa/working-with-indexeddb

Configuring the database

Now that we know the terms we should use, we can start using the component. We can do that by calling the OpenIndexedDB client action and passing the DatabaseName, version and the ObjectStores details (Name, PrimaryKey, PrimaryKeyType and IndexList)

  • Configuring Object Stores

- Name: The name of the store

- PrimaryKey: The name of the primary key, usually id

- IsAutoIncrement: Set's if the primary key should be auto incremented. Only works for integer primary keys

- PrimaryKeyType: Integer or Text - Depending on the datatype of the primary key, choose integer or text

  • (Optional) Configuring Indexes

- Name: Name of the index - something like PhoneIndex

- Property:  Property on the data you want to index - something like PhoneIndex

- IsUnique: If set to true, the index does not allow duplicate values for a single key


Using the component actions

After all database related configurations are done we can use the component actions

- CheckAvailability - Checks if indexedDB is supported by the browser

- ClearStoreIndexedDB - Delete all records for a given store 

- DeleteItemIndexedDB - Deletes an item with a given key and store

- GetAllItemsIndexedDB - Gets all items from a given store

- GetItemIndexedDB - Gets an item from a given key and store

- SetItemIndexedDB - Saves an item to given store


To know more about this actions, please check the sample app here: https://expertsmobile-dev.outsystems.com/IndexedDBSample


Any questions please feel free to use the forums, we will try to help :D