IndexedDB Methods
Description
Methods for storing, retrieving, and removing data in IndexedDB
Discussion
IndexedDB is a NoSQL data store available in most modern web browsers. Data is stored in IndexedDB as key-value pairs. IndexedDB is similar to Local Storage in that it's a client-side storage where you can persist application data beyond the duration of a browser session. IndexedDB offers several advantages over Local Storage, making IndexedDB the preferred method of storing data in the client:
- IndexedDB actions are asynchronous. This means IndexedDB operations do not block the main JavaScript thread. Promises or callbacks are used instead to continue processing once an operation completes.
- IndexedDB actions are transactioned. This ensures that your operations will complete even if the user opens your app in multiple browser tabs.
- Significantly more storage space -- 1GB or more depending on the browser. Local Storage is limited to 5MB.
- Data persisted for a long time and more reliably than Local Storage. Though browser dependent, the scope in which an IndexedDB database will be deleted is more constrained than Local Storage.
- Any type of data (string, blob, array, etc) can be stored. Local Storage only supports storing strings.
Data in an IndexedDB database is protected by the same origin policy. This means that data stored to IndexedDB by a web site can only be retrieved by the same site. This applies to both the domain and protocol -- HTTP and HTTPS versions of the same domain (e.g. www.example.com) cannot access the other's IndexedDB data.
Be aware that IndexedDB data can be accessed through the browser's debugging tools (such as Chrome Debugger) and the raw values read. If you store information in IndexedDB, users can access it through the browser tools.
See caniuse for information on browser support for IndexedDB.
Alpha Anywhere automatically handles setting up your IndexedDB database for your app. The {dialog.object}.idb* methods can be used to check for IndexedDB support; write, read, and delete data; and get basic information about the keys stored in your IndexedDB database.
The Chrome debugger can be used in Live or Working Preview to inspect IndexedDB. To inspect the database, open the Chrome debugger. Then, navigate to the Application tab. You will find the IndexedDB database in the Application > Storage > IndexedDB section of the Application tab. The database name created for your app is always named "keyvaluepairs".
While Live and Working preview are separate origins (each will have its own IndexedDB), the same IndexedDB database is used for all components when run in Live Preview and Working Preview.
Videos
Webinar: IndexedDB
We explain what IndexedDB is and how you can use it with Alpha Anywhere.
Methods
- idbAvailable Method
Checks if IndexedDB is supported by the browser.
- idbClear Method
Deletes all data from the IndexedDB database.
- idbDeleteItem Method
Deletes an item from IndexedDB.
- idbGetItem Method
Retrieves the value for an item from IndexedDB.
- idbGetKeys Method
Gets list of keys from IndexedDB.
- idbLength Method
Counts the number of items in IndexedDB.
- idbSetItem Method
Saves a value to IndexedDB.