Storage for Usage

Using the right storage for your offline (web or hybrid) app

- 9 mins
storage javascript offline online web hybrid app localstorage sqlite pouchdb lokijs databases browser chrome mobile

Storage for Usage

“Sto” well to avoid “rage”

That your awesome (Web or Hybrid) app would be awescome if 
your users could use it offline.

Up until now when my current employer is starting to preach about offline capable mobile apps, i have never bothered about building offline capable apps. My employer’s preaching got to me and i decided to look into developing proper offline capable mobile apps that even support offline login and authentication and some basic crud operations.

Spells that make it possible

Personally, i have a good habit i think other developers should also adapt. I took my time to search and understand the different ways i could go about implementing a good solution, rather than “follow trend”. Sometimes trending technology could be the best solution too, but better understanding of all available options allows you make better and informed decisions.

After looking stuff around, i ended up with a number of options for implementation.

Localstorage

Localstorage is the most common method and simples of storing in app data. It allows you to store data in key-value pairs.

There are frameworks built on top of localstorage such as ngStorage and localForage. A simple usage in code might look like:

    // simple example
    localStorage.setItem('country', 'nigeria');
    var name = localStorage.getItem('country');
    console.log(name);

    // complex example
    var records = [
        {country: 'nigeria', no_of_states: 36 },
        { country: 'usa', no_of_states: 50 }
    ];
    localStorage.setItem('records', JSON.stringify(records));
    var output = JSON.parse(localStorage.getItem('records'));
    console.table(output);

SQLite

Basically, SQLite is an embedded SQL database. So rather than have your database separate from your application, you have it in your application. If you are familiar with SQL you shouldn’t have a problem with this. I’ll be using the cordova-sqlite-storage as a basis for this discussion.

A simple usage in code might look like:

    // to open a database
    var db = null;
    document.addEventListener('deviceready', function() {
        db = window.sqlitePlugin.openDatabase({name: 'countries.db', location: 'default'});
    });

    // to populate a database
    db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS Countries (name, no_of_states)');
        tx.executeSql('INSERT INTO Countries VALUES (?,?)', ['nigeria', 36]);
        tx.executeSql('INSERT INTO Countries VALUES (?,?)', ['usa', 50]);
    }, function(error) {
        console.log('Transaction ERROR: ' + error.message);
    }, function() {
        console.log('Populated database OK');
    });

    // to retrieve data from a database
    db.transaction(function(tx) {
        tx.executeSql('SELECT count(*) AS FROM Countries', [], function(tx, rs) {
            console.log('Record count (expected to be 2): ' + rs.rows.item(0).mycount);
        }, function(tx, error) {
        console.log('SELECT error: ' + error.message);
        });
    });

PouchDB

PouchDB is an open-source JavaScript database inspired by Apache CouchDB. It uses IndexedDB under the hood and falling back to WebSQL where IndexedDB isn’t supported. You can use it with Angular, React, Ember, Backbone, or your framework of choice.

There are frameworks/adapters built on top of it such as angular-pouchdb, ngPouch, ng-pouchdb, vue-pouch, kendo-pouchdb, etc. A simple usage in code might look like:

// create a new local database
var db = new PouchDB('countries');

// create a new remote database
var db = new PouchDB('http://localhost:5984/countries');

// storing a document
var doc = {
  "_id": "c1",
  "name": "nigeria",
  "no_of_states": 36
};
db.put(doc);

// retrieving asynchronously by _id the callback way
db.get('c1', function (error, doc) {
  if (error) {
    // error stuffs
  } else {
    // do some stuff with our doc
  }
});

// retrieving asynchronously by _id using promise
db.get('c1').then(function (doc) {
  // do some stuff with our doc
}).catch(function (err) {
  // error stuffs
});

LokiJS

LokiJS is a lightweight javascript document oriented database. It is intended to be used as an in-memory database, with the possibility of persisting the data.LokiJS draws inspiration from MongoDB and CouchDB, in that the API is similar (but not identical or compliant) to MongoDB. The glossary used is also classic NoSQL in that records are documents, documents are stored in collections.LokiJS supports a limited form of indexing for faster document access. The id field in particular is automaticallly populated and indexed, and searched using the binary search algorithm. Other document properties can be indexed for faster search on a particular object field.

// Creating a database
var db = new loki('example.db');

// Add a collection :
var countries = db.addCollection('countries');

// Insert documents
countries.insert({
    name: 'usa',
    no_of_states: 50,
});

// alternatively, insert array of documents
countries.insert([
    {name: 'usa', no_of_states: 50},
    {name: 'nigeria', no_of_states: 36}
]);

// Simple find query
var results = countries.find({ no_of_states: {'$gte': 36} });
var result = countries.findOne({ name: 'nigeria' });

In conclusion

After my little research into these technologies and comparing the scope of the offline application i want to build, i have made a decision on the tech to use. As developers we should do research into the tools and tech we use for projects so we don’t end up with something overkill or underkill.

Cheers!!!

Related Posts

Olakanmi Oluwole

Olakanmi Oluwole

Cyber Security and Software Engineering.

comments powered by Disqus
rss facebook twitter github youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora