Use SQLite Instead of Local Storage In Ionic Framework

Switching to object-based data storage can often be tough. If you’re trying to start Phonegap or Ionic Framework development and are coming from native development, the whole local storage concept can be a tough one to grasp. Or maybe you just prefer a structured query language (SQL) when working with your data.

Not to worry, because there is a plugin for that!

Making use of the Cordova SQLite plugin by Chris Brody, you can use a SQLite data source for managing your data in Android and iOS. Pair this with ngCordova and you can better compliment your Ionic Framework development with an AngularJS experience.

If you’re using Ionic 2, you should check out this tutorial instead.

Like with all my tutorials, let’s start by creating a fresh Ionic project:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Remember, if you’re not on a Mac computer, you cannot add and build for the iOS platform.

The next thing we want to do is add the SQLite plugin. This can be done by running the following command:

cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git

Because this is an Ionic Framework article, we’re going to make use of ngCordova as it tends to make life pretty easy after including it.

Download the latest release and copy ng-cordova.min.js into your www/js directory.

With the library file included, we now need to include it in our project. Open your index.html file and add the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

It is very important you add ng-cordova.min.js above the cordova.js line otherwise it will not work.

One more thing must be added before we can start using ngCordova. We need to inject it into our angular.module, found in app.js, like the following:

angular.module('starter', ['ionic', 'ngCordova'])

It’s time to start using this library. For simplicity, we are going to do the following:

  • Create a new table called people
  • Insert two people into this new table
  • Select all the people found in our table with my last name

Before we start coding, it is very important to note that database activity can only be done when the onDeviceReady() method has fired. With this in mind, I’m going to open the database in the modules .run() method like so:

var db = null;

var example = angular.module('starter', ['ionic', 'ngCordova'])
    .run(function($ionicPlatform, $cordovaSQLite) {
        $ionicPlatform.ready(function() {
            if(window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if(window.StatusBar) {
                StatusBar.styleDefault();
            }
            db = $cordovaSQLite.openDB("my.db");
            $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS people (id integer primary key, firstname text, lastname text)");
        });
    });

We want to have access to the database globally so I created a variable outside of any method or controller. To use the ngCordova functions we need to include $cordovaSQLite in the .run() method. Finally, you can see that I’ve created a new database called my.db and a fresh table called people.

This leaves us with a usable database ready for activity in our controllers. Take the following for example:

example.controller("ExampleController", function($scope, $cordovaSQLite) {

    $scope.insert = function(firstname, lastname) {
        var query = "INSERT INTO people (firstname, lastname) VALUES (?,?)";
        $cordovaSQLite.execute(db, query, [firstname, lastname]).then(function(res) {
            console.log("INSERT ID -> " + res.insertId);
        }, function (err) {
            console.error(err);
        });
    }

    $scope.select = function(lastname) {
        var query = "SELECT firstname, lastname FROM people WHERE lastname = ?";
        $cordovaSQLite.execute(db, query, [lastname]).then(function(res) {
            if(res.rows.length > 0) {
                console.log("SELECTED -> " + res.rows.item(0).firstname + " " + res.rows.item(0).lastname);
            } else {
                console.log("No results found");
            }
        }, function (err) {
            console.error(err);
        });
    }

});

I’ve gone ahead and created two very basic functions. The insert function will add a first and last name record into the database while the select function will find records by last name. Basic, but I hope you get the idea.

Something to note about my controller though. I am not doing these database calls from inside an onDeviceReady() function. Had these functions been fired when the controller loads, they probably would have failed. Since I am basing the database activity off button clicks, it is probably safe to assume the device and database is ready for use.

If you wish to delete any of your SQLite databases you can do so by including the following:

$cordovaSQLite.deleteDB("my.db");

There are plenty of other ngCordova and baseline SQLite commands that you can make use of. The plugin documentation is very thorough and worth a read. If you want to use this SQLite plugin in Ionic 2, you should check out my tutorial on the subject.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Subscribe

Subscribe to my newsletter for monthly tips and tricks on subjects such as mobile, web, and game development.

Subscribe on YouTube

Support This Site