How to Use Indexeddb

From WikiHTP

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 system for accessing information through Javascript is not blocking for the browser.

Next we will explain the process of using IndexedDB in your App.

How to open a database[edit]

Now let's see the procedure of using IndexedDB. We begin by opening the database.

// We open the DB
var request = window.indexedDB.open("myDB", 1);

request.onerror = function(event) {
  // We handle the error when opening.
  console.error(error:,event.target.errorCode);
};

request.onsuccess = function(event) {
  // We make the process successful when opening.
  db = event.target.result;
};

How to start the reading or writing in IndexedDB[edit]

Once you open our IndexedDB database you will want to read or write data in the Object Store. This operation is carried out by means of a code such as the following.

// Writing Data in the Object Store
request.onsuccess = function(event) {
db = event.target.result;
 
var dummyData = [ 
{
	personal_id: 1,
	first_name: Carlos
},
{
personal_id:  2,
	first_name: Jhon
}
];

// It can be readonly or readwrite
var transaction = db.transaction(["customers"], "readwrite");

// Adding the data in 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 = [ 
{
	personal_id: 1,
	first_name: Carlos
},
{
personal_id:  2,
	first_name: Jhon
}
];
// It can be readonly or readwrite
var transaction = db.transaction(["customers"], "readonly");
// Adding the data in 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 registration is obtained.
 );
};

How to delete in the Object Store[edit]

Now let's look at a code that could be used for the data store delete operation.

// Deleting a record
var request = db.transaction(["customers"], "readwrite")
                .objectStore("myUsers")
                .delete("1");
request.onsuccess = function(event) {
  // It was successfully deleted.
};

Using IndexedDB comfortably in your App[edit]

As you can see, using IndexedDB is relatively easy. However, at some point it becomes difficult to use because of its design and its implementations. For this reason there are several bookstores and wrappers that will help you manage your transactions easily.

Among the best-known and most appropriate libraries to facilitate work with the IndexedDB database we suggest a couple of alternatives:

LocalForage : which is quite simple, and very similar to localStorage.

Dexie.js : My favorite, because it allows to easily use promises and is very well documented.

I hope you enjoyed this tutorial. Now you have another useful tool to assemble your Progressive Web Apps.

About This Tutorial

This page was last edited on 28 January 2019, at 06:37.