How to save settings/preferences in your nativescript vue application

How to save settings/preferences in your nativescript vue application 1

Preferences allow you to save settings and other stuff in persistent key-value storage at your phone. We encounter many situations when we have to save our application data to the phone and load later on. In such a case we can utilize preferences module to make our life easier.
Settings are the common feature of almost all apps. If we have implement settings functionality we should use the preferences module provided by Android API. In the native script, we can use
Preferences plugin from the native script marketplace by Steve McNiven-Scott. (https://market.nativescript.org/plugins/nativescript-preferences)

Step 1. Design Settings UI

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
<PreferenceCategory android:title="Grouping">
<EditTextPreference
android:key="name_preference"
android:title="Username"
android:defaultValue="" />
<EditTextPreference
android:key="pass_preference"
android:title="Password"
android:defaultValue="" />
<SwitchPreference
android:key="enabled_preference"
android:title="Enabled"
android:summary="Is autologin Enabled ?"
android:defaultValue="true" />
</PreferenceCategory>
</PreferenceScreen>

You can use native android documentation for different fields such as a switch, textbox, list, etc.

Step 2: Install Preferences Plugin

Open cmd in your current directory and run this command.

tns plugin add nativescript-preferences

Step 3: Implement preferences

<script>
var prefs = new Preferences();
....

suppose we want to save user’s name . we can do,

prefs.setValue("name_preference",username);

if we want to retrieve the user’s name


prefs.setValue("name_preference",username);

From this example we can see implementing settings functionality is very very easy.
Step 1 in this guide is not compulsory. You can make your own UI for settings if you like to.

Thank You.

Leave a Reply

Your email address will not be published.