In my previous part, I have given the basic introduction of IndexedDB in which we have given its features, size limit, asynchronous behaviour and how we can create a DB and Object Store(Table).
Let’s discuss how we can perform the DML Queries in IndexedDB.
Getting data from IndexedDB
We will continue with the data which we inserted in out previous part. It looks like this in Chrome Dev Tools
- Retrieving data using keyPath (primary key)
In the above code, first we have open the connection to the Database. then we need to write our code in onsuccess handler. As previously discussed Indexed DB is built transactional database model. So, we will need a transaction to perform any DML query on the Database. While creating the transaction we need to mention all the Object Stores in which the query is performed. Then , we can get the data from Object Store using the value that matches with our keyPath column.
At last from line no. 18–20 is the short form of the above statements.
2. Using Cursor
This is how we can loop over the entire object store and retrieve whatever we want. ‘cursor.key’ is keyPath(Primary key) value of that entry.
3. Using Index
Here we are retrieving result based on index column ‘name’. We can also specify the range and direction of cursor.
Inserting a new New Entry in Database
We can verify the new entry in Database
We need to make sure that when we making transaction it should be in ‘readwrite’ mode because we need to write/update in the database.
Removing the data
Verification using chrome dev tools
So, this is how we can delete a entry in Database using keyPath (primary key) column.
Updating data in the Object Store
We can verify the updated entry using chrome dev tools.
First, we have to get the result in some local variable then we need to update the local variable data , then we need to store the data back into the database.
So, this how we can perform some simple DML commands/queries in the IndexedDB. I hope, you have now basic idea how to work in IndexedDB and how to perform basic operations.
Thanks to Mozilla Developer Network (MDN) for the information that I have used in writing this story.