At some point in our development, we want to save transactional information when our app is offline. We could save it in cache storage, but this can be complex, such as in scenarios like managing the information in a CRUD (Create, Read, Update, Remove). To help in these instances, we have technology that has existed in web browsers for a very long time: IndexedDB.
What Is IndexedDB?
IndexedDB is a transactional database system that, unlike other options that we have in browsers, is perfect for storing significant amounts of data, such as catalogs or other types that require a quick information search. Some terms with which to familiarize yourself about IndexedDB are as follows:
Object store: Object stores are similar to tables or relations in traditional relational databases.
Database: Databases are where all the object stores are kept. You can create as many databases as you want, but usually one per app is sufficient.
Transaction: Every action in IndexedDB works through a transaction. To effect any action, you first need to create a transaction, then listen for events on completion. Transactions are useful for maintaining integrity. If one of the operations fails, the whole action is canceled.
One feature that makes IndexedDB perfect to be used with PWAs is that it is asynchronous. Previously, it was both synchronous and asynchronous. The synchronous API was intended for use only with web workers, but was removed from the spec because it was unclear whether it was needed. For more information on the asynchronous API, see https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB.
Using IndexedDB
In general terms, the process of using IndexedDB with our app is shown in Figure 6-1.
Figure 6-1
IndexedDB workflow
Opening a DB
The process to open IndexedDB using JS is as follows:
var connection;
connection = window.indexedDB.open("notes", 1);
connection.onsuccess = (event) => {
// data
let dummyData = [];
// Opening successful process.
db = event.target.result;
writingObjectStore(dummyData);
readingObjectStore();
};
connection.onerror = (event) => {
// We handle the opening DB error.
console.error('error:', event.target.errorCode);
};
Initiating Read/Write in the Object Store
The proccess to write/read from IndexedDB using JS is as follows:
function writingObjectStore(dummyData) {
// It can be read-only or readwrite.
var transaction = db.transaction(['notes'], 'readwrite');
// Adding the data in objectStore.
let objectStore = transaction.objectStore("notes");
dummyData.forEach(
(note) => {
let request = objectStore.add(note);
request.onerror = (e) => {
// Handle the error.
};
request.onsuccess = (e) => {
console.log('Item added to indexedDB');
};
}
);
}
function readingObjectStore() {
let transaction = db.transaction(["notes"], "readonly");
// Adding the data in objectStore.
let objectStore = transaction.objectStore('notes') ;
let request = objectStore.getAll();
request.onsuccess = () => {
request.result.forEach((item) => console.log('Items by name:', item));
};
}
Deleting from the Object Store
The process to delete from IndexedDB using JS is as follows:
function deletingFromTheObjectStore() {
// Deleting a registry.
let request = db.transaction(["notes"], "readwrite")
Run the server, In your browser open Chrome DevTools and now you can see the same like in Figure 6-2.
Figure 6-2
Using IndexedDB with plain JS
Using IndexedDB in VueNoteApp
As you can see, using IndexedDB is relatively easy, but at some point it can get messy with regard to design and implementation. This is the reason why there are libraries and wrappers that help us handle transactions more easily. I recommend localForage (similar to localStorage), but my favorite is Dexie.js. I like it because it allows me to use promises easily and is well documented. You can find the documentation at https://dexie.org/docs/.
To work with Dexie.js, we have to move to a new branch of IndexedDB in git:
$git checkout indexedDB
And we need to install Dexie.js in our project:
$npm install dexie --save
Then we create a configuration file for IndexedDB named indexedDB.js:
import Dexie from 'dexie';
let iDB = new Dexie('Notes');
const version = 1;
iDB.version(version).stores({
notes: '++id, title'
});
export let indDB = iDB;
Later, we update Dashboard.vue to get the notes, and save and delete from IndexedDB:
