Saving Data In Your NativeScript Mobile Application

Recently I started fiddling with NativeScript from Telerik because I’ve been hearing a lot about it when I attend various developer conferences. If you’re unfamiliar with NativeScript, it is a cross platform mobile development framework similar to Ionic Framework and React Native. The difference being that NativeScript claims to map your UX to native layouts and give you full access to all device APIs.

Starting out, the thing I had some of the most trouble with was persisting data since it was poorly documented. Here we’re going to look at building a simple application that saves data to be accessed in the future, rather than only during the application session.

Previously I wrote about saving data using React Native as well as saving data using Ionic Framework. Although not too different, we’re going to look how NativeScript does it.

Before we begin, the assumption is that you already have NativeScript installed and functioning on your system.

From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following to create a new project:

tns create ExampleProject
cd ExampleProject
tns platform add ios
tns platform add android

It is important to note that if you are not using a Mac, you cannot add and build for the iOS platform. You will be restricted to only Android development.

We’re now left with a basic project and we’re going to keep it basic. We only want to save data here and the basic project leaves us with a perfect opportunity. The base template is just a tap-the-button example that decreases a counter and displays it to the screen. We’re going to save the current count so we can continue decreasing at a later time.

Open your projects app/main-view-model.js file and add the following line:

var applicationSettings = require("application-settings");

This allows us to save and read from the application settings. The API documentation for application settings can be found buried in the NativeScript website here.

Drop to the line referencing this.counter = 42; or something similar to it. We want to use what is stored rather than a constant value. Replace that line with the following:

this.counter = applicationSettings.getNumber("counter", 42);

The application settings module uses key-value pairs. Here we’re trying to read from the counter key. If it does not exist (it hasn’t been set yet), then use the default value in the second parameter.

In the same app/main-view-model.js file, drop down to the line with this.counter--; and add the following below it:

applicationSettings.setNumber("counter", this.counter);

Looks a lot like HTML5 local storage doesn’t it?

At the end of the day, our minor modifications to the app/main-view-model.js file should look like this:

var observable = require("data/observable");
var applicationSettings = require("application-settings");

var HelloWorldModel = (function (_super) {
    __extends(HelloWorldModel, _super);

    function HelloWorldModel() {
        _super.call(this);
        this.counter = applicationSettings.getNumber("counter", 42);
        this.set("message", this.counter + " taps left");
    }

    HelloWorldModel.prototype.tapAction = function () {
        this.counter--;
        applicationSettings.setNumber("counter", this.counter);
        if (this.counter <= 0) {
            this.set("message", "Hoorraaay! You unlocked the NativeScript clicker achievement!");
        }
        else {
            this.set("message", this.counter + " taps left");
        }
    };

    return HelloWorldModel;

})(observable.Observable);

exports.HelloWorldModel = HelloWorldModel;
exports.mainViewModel = new HelloWorldModel();

If you want to store JSON data in the application settings, you can easily call the JavaScript JSON.stringify function first to serialize the data into a string.

Conclusion

Saving data in your NativeScript mobile Android and iOS application isn’t difficult to do. It is similar to HTML5 local storage or React Native AsyncStorage. Long term it is best to use a different storage solution that can synchronize with a remote database, but for the short term you can use the application settings without issue.

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.