[NativeScript] 데이터 저장 - 간단한 값 저장하기(Application Settings)

NativeScript에서 Application Settings는 기본적으로 어플리케이션과 관련된 정보를 저장하고 불러올때 사용하는 모듈입니다. 설정 화면에서 설정 값을 저장하고 불러오는 기능이지만 간단한 데이터를 저장할 때 사용할 수 있습니다. 

 

한글로 되어 있는 가이드가 명확하게 없고 있어도 옛날 코드형태로 되어 있어 작동이 안되는 문제점을 해결하는 시간과 노력을 줄이고자 이글을 남깁니다. 개발자 여러분의 시간은 소중하니까요^^

 

기본정보 

Application Settings에 저장할 수 있는 데이터 형태는 Boolean, Number, String을 저장할 수 있습니다.

관련 메소드는 다음과 같습니다. 

소스코드

숫자가 1씩 증가하여 저장하고 출력하는 Number 버튼과,  숫자를 계속 이어 붙여서 저장하고 출력하는 String 버튼 프로그램입니다. 

 

주의사항

"tns-core-modules/application-settings" 모듈을 추가하고 컴파일 할 때 해당 모듈을 사용할 수 없다고 할 수 가 있는데 모듈 불러오는 방식 두 가지를 적용해보면서 자신의 NativeScript 환경에 맞춰서 이용하면 됩니다. 

 

// const appSettings = require("tns-core-modules/application-settings");
import * as appSettings from '@nativescript/core/application-settings';

 

 

소스코드

<template>
    <Page>
        <ActionBar>
            <Label text="Home"/>
        </ActionBar>

        <StackLayout>
            <Button class="info" textWrap="true" text="Number" @tap="btnclick"/>
            <Button class="info" textWrap="true" text="Text" @tap="btnclickText"/>
            <Label class="info" :text="mes"/>
        </StackLayout>
    </Page>
</template>

<script>
// const appSettings = require("tns-core-modules/application-settings");
import * as appSettings from '@nativescript/core/application-settings';

  export default {
      data(){
          return {
              mes:"Result Text",
              num : 0
          }
      },
    computed: {
      message() {
        return "Blank {N}-Vue app";
      },
    }, //computed
    methods: {
        btnclick: function(){
            this.num = appSettings.getNumber("t1");
            if(!this.num) this.num=0;
            console.log(this.num);
            this.num ++;
            this.mes = this.num ; 
            appSettings.setNumber("t1", this.num);

        },
        btnclickText:function(){
            var bufText = appSettings.getString("t2");
            if(!bufText) bufText="";
            this.mes = bufText;
            console.log(bufText);
            bufText += this.num+", "; 
            appSettings.setString("t2", bufText);
            }
    }
  };
</script>

<style scoped lang="scss">
    @import '@nativescript/theme/scss/variables/blue';

    // Custom styles
    .fas {
        @include colorize($color: accent);
    }

    .info {
        font-size: 20;
        horizontal-align: center;
        vertical-align: center;
    }
</style>

 

예제화면