Saving Data With Ionic Framework

Coming from native Android and SQLite, the concept of universal data storage on local devices has been different. Apache Cordova and Ionic Framework, being as awesome as they are, support HTML5 local storage calls. This allows us to store and retrieve data without the use or knowledge of SQL and on any platform we plan to use.

Typically you would make use of the local storage by using commands like the following:

if(typeof(Storage) != "undefined") {
    localStorage.setItem("firstname", "Nic");
    localStorage.setItem("lastname", "Raboy");
    alert(localStorage.getItem("firstname") + " " + localStorage.getItem("lastname"));
} else {
    alert("Sorry, your browser does not support Web Storage...");
}

You can easily use the setItem, getItem, and removeItem methods to manage your data. The good news is you can use those same commands with Ionic Framework.

myApp.controller('Login', function($scope) {
    $scope.login = function(username, password) {
        window.localStorage.setItem("username", username);
        window.localStorage.setItem("password", password);
    };

    $scope.isLoggedIn = function() {
        if(window.localStorage.getItem("username") !== undefined && window.localStorage.getItem("password") !== undefined) {
            return true;
        } else {
            return false;
        }
    };

    $scope.logout = function() {
        window.localStorage.removeItem("username");
        window.localStorage.removeItem("password");
    };
});

But what happens if you want to store complex data. For example what if you wanted to store data from an $http.get request to cache in the event no internet is available in the future.

myApp.controller('Profile', function($scope, $http) {
    $http.get("https://api.example.com/profile", { params: { "api_key": "some_key_here" } })
        .success(function(data) {
            $scope.profile = data;
            window.localStorage.setItem("profile", JSON.stringify(data));
        })
        .error(function(data) {
            if(window.localStorage.getItem("profile") !== undefined) {
                $scope.profile = JSON.parse(window.localStorage.getItem("profile"));
            }
        });
});

The above is an example of an fictional API request that gets a users profile. When the GET request succeeds, the result is stored in the scope as well as a local storage bucket. However, you can’t just store the raw object into local storage. You must first serialize it with the JSON.stringify command. This will create a flat string instead of an object. Now lets say the profile API is called a second time, but the mobile device’s internet isn’t stable or it doesn’t exist. The error callback will happen and if the local profile bucket exists, JSON.parse will un-flatten it and store it in our scope. Besides seeing possibly older data, the user won’t even know that there was a problem.

A video version of this article can be seen below.

Nic Raboy

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