Continuing from Storing data with localStorage, this Easy Peezy will be more Peezy than Easy while covering the bare basics of using indexedDB.
IndexedDB is an API that allows data to be stored client side. Just like using the localStorage object, data is stored locally on the user’s computer. The main differences are how that data is stored and the amount of data that can be stored.
- localStorage stores data as strings and has about a 5MB limit.
- IndexedDB stores data as is and can use 50% or more of free disk space
Using this API can be pretty intimidating and just down right frustrating before you truly understand it. But once you understand how to use the API, your Web App will have a pretty powerful weapon that can expand its use and functionality.
To make this complex process easier to understand, let’s start with:
1. STORING data
indexedDB: Storing Data
1. Open and name a Database with a version number ( IDBOpenRequest )
2. Assign a variable to the result of this open request ( IDBDatabase )
3. Use the variable to create a table to store the data ( IDBObjectStore )
4. Create readwrite transaction to add data to the table ( IDBTransaction )
5. Use the Add method to add data to that table ( IDBObjectStore.add( ) )
6. Create console.logs for success/error of adding data
7. Close the Database ( IDBDatabase.close() )
FINAL RESULT — Click here for Full Code
