What is IndexedDB and how to work with this transactional database system that is integrated in the browser and we can use to develop web applications and PWAs.
Data management is essential in all types of systems and of course in web applications. Undoubtedly, at some point in development you will want to save transactional information when your App is not connected to the Internet.
Within the framework of a progressive application we could save it in our Cache Storage but this can be a complex task in scenarios such as a CRUD (Create, Read, Update, Remove) of some operation in our App. For this scenario we have a technology that exists in the browser for a long time called IndexedDB. In this article you will be able to get to know this database system and learn how to work with it.
What is IndexedDB?
IndexedDB is a transactional database system, capable of storing structured information within the browser. IndexedDB, unlike other options we have for storage in the browser, is perfect for storing large amounts of data, such as catalogs, or others that also need a way to quickly search for information.
One feature that makes it perfect for use with Progressive Web Apps is that it is Asynchronous, so the information access system through Javascript does not block the browser.
Note: Previously IndexedDB was Synchronous and Asynchronous but then the synchronous option was removed from the specification.
How to use IndexedDB
Next we are going to explain the process of using IndexedDB in your App. In the following image you can see a diagram of the operation.
How to open a database
Now let’s see, already with code, this procedure of use. We start by opening the database.
// Open the DB var request = window.indexedDB.open(“myDB”, 1); request.onerror = function(event) { // Handle the error on open. console.error(“error:”,event.target.errorCode); }; request.onsuccess = function(event) { // Make the process successful on open. db = event.target.result; };
How to start the read or write operation
Once our IndexedDB database is open you will want to read or write data to the Object Store. This operation is carried out using a code like the following.
// Writing Data to the Object Store request.onsuccess = function(event) { db = event.target.result; var dummyData = ; // can be readonly or readwrite var transaction = db.transaction(, “readwrite”); // Adding the data to the objectStore var objectStore = transaction.objectStore(“myUsers” ); dummyData.forEach( function(customer){ var request = objectStore.add(customer); }); }; // Reading Data in the Object Store request.onsuccess = function(event) { db = event.target.result; var dummyData = ; // can be readonly or readwrite var transaction = db.transaction(, “readonly”); // Adding the data to the objectStore var objectStore = db.transaction(“myUsers” ); var request = objectStore.get(“1”); request.onerror = function(event) { // Error handling }; request.onsuccess = function(event) { // Do something when the record is obtained. ); };
How to delete in the Object Store
Now let’s look at some code that could be used for the object store data wipe operation.
// Deleting a record var request = db.transaction(, “readwrite”) .objectStore(“myUsers”) .delete(“1”); request.onsuccess = function(event) { // deleted successfully. };
Comfortably using IndexedDB in your App
As has been verified, using IndexedDB is relatively easy. However, at some point it becomes cumbersome in its design and its implementations. For this reason, there are several libraries and wrappers that will help you manage your transactions easily.
Among the most well-known and appropriate libraries to facilitate the work with the IndexedDB database, we suggest a couple of alternatives:
- LocalForage: whose use is quite simple, and very similar to localStorage.
- Dexie.js: My favorite, as it allows easy use of promises and is very well documented.
I hope you have enjoyed this entry. Now you have another useful tool to set up your Progressive Web Apps. Don’t forget to read the entire , or for more complete training, take the .
Facebook Comments
Disqus