For all fans of this series, I launch the mail list, so you can get the news directly into your mailbox. Nevertheless, this isn’t as interesting as the progress on the Memory King. I finally decided how to store user data. And I have made a big progress in this field.

Icon

IndexedDB vs LocalStorage

I was deciding between LocalStorage and IndexedDB because I want to be able to use Memory King offline (cloud sync will be added in future). Even though IndexedDB is supported only in newer browsers. Electron supports it so we don’t have to care 😉 . It turns out to be an easy decision. LocalStorage works as key – value storage, with synchronous API. On the other hand indexedDB supports more features and it provides an asynchronous API. This means that the LocalStorage is good only for smaller amounts of data. IndexedDB is a better option for me, but it’s implementation is a little bit complicated.

Implementing IndexedDB

There are third party libraries for dealing with the IndexedDB, but I don’t know any of them. And I had enough of learning Redux and React, so I decided to implement IndexedDB by myself. While implementing, I found very helpful this documentation. There is still some work needed, but I will give you quick walk-through for my db.js file, which includes whole implementation.

First thing what we need to do is established the connection with a database. Before that we have to set a few variables for storing the database. Since IndexedDB is asynchronous, we have to provide a callback function, which get fired once the connection is established. We also use event handlers. Most of them are pretty clear; the onupgradeneeded event will be triggered when you open a database for the first time or upgrade its version. Each object store need key (key is unique for each object), for this purpose, we can use key path or key generator.

Whenever we want to work with the data we use transactions. In this particular case we are fetching all data from database. The collected data are sent to the callback function, which in my case give data into the Redux store. It’s good to know that you can also retrieve only certain data by using indexes and ranges.

We can add the data into the database in a similar way. We just have to use ‘readwrtite’ transaction and create the object with required fields, which we then put into the database. We only have to remember that the key value must be always unique. In this case we are using the current time as a key.

And that’s basically it and it wasn’t even that hard. Still, I am really exited about it. Another great news is that I started to understand Redux 😀 .

Extension for Electron DevTools

One thing which helps me understand React and Redux are React Developer Tools. Dev Tools in electron are really great and you can even extend them. All you need is Chrome browser. Then you install an extension of your choice into the Chrome. The extension is saved somewhere in your computer. Then you just have to include this line in main.js file (main electron file):

BrowserWindow.addDevToolsExtension("Place your location here");

For more instructions about the location, visit this documentation.

Summary

IndexedDB is interesting tool and I like it, but I tested it only with a small amount of data. Right now I’m reworking the design using Material Design Lite components and I run into some issues, but I will talk next time about it. Also school started here, but that can’t stop me. I hope that even more progress will be done over the next week. Since now I know how to save the data, I would like to start working on the user activities and displaying of data on some beautiful dashboard.