Saving Data With IonicFramework

by - May 31, 2016

Coming from native Android and SQLite, the concept of universal data storage on local devices has been different. Apache Cordova and IonicFramework, 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:

JavaScript ExampleJavaScript
    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 IonicFramework.

    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() {

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("";, { 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"));

Given above is an example of a fictional API request that gets a users profile. After the success of the GET request, we can store the result in the scope and a local storage bucket. But, the raw object just can't be stored into local storage. Firstly, JSON.stringify command has to be used to serialize. This leads to creation of a flat string instead of an object. Now when the the profile API is called a second time, but the mobile device’s internet isn’t stable or it doesn’t exist. Now lets say 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.

You May Also Like