参考ページ
docs.nativescript.org
docs.nativescript.org
コード
<template>
<Page class="page">
<ActionBar title="Local Data Storage" class="action-bar" />
<ScrollView>
<StackLayout class="home-panel form input-field">
<!-- store/retrieve number -->
<Label text="数値" class="heading" />
<TextField v-model="num" hint="Enter a Number..."
class="input input-border" keyboardType="number" />
<StackLayout orientation="horizontal"
horizontalAlignment="center">
<Button text="保存" @tap="saveNumber"
class="btn btn-primary" />
<Button text="削除" @tap="removeNumber"
class="btn btn-primary" />
</StackLayout>
<!-- store/retrieve string -->
<Label text="文字列" class="heading" />
<TextField v-model="str" hint="Enter a String..."
class="input input-border" />
<StackLayout orientation="horizontal"
horizontalAlignment="center">
<Button text="保存" @tap="saveString"
class="btn btn-primary" />
<Button text="削除" @tap="removeString"
class="btn btn-primary" />
</StackLayout>
<!-- store/retrieve boolean -->
<Label text="Boolean" class="heading" />
<Switch v-model="bool" class="switch" />
<StackLayout orientation="horizontal"
horizontalAlignment="center">
<Button text="保存" @tap="saveBoolean"
class="btn btn-primary" />
<Button text="削除" @tap="removeBoolean"
class="btn btn-primary" />
</StackLayout>
<StackLayout class="hr-light" />
<Button text="全てのデータを削除する" @tap="removeAll"
class="btn btn-primary" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
import Test from "./Test";
const appSettings = require("tns-core-modules/application-settings");
const dialogs = require("tns-core-modules/ui/dialogs");
export default {
data() {
return {
num: null,
str: "",
bool: false
};
},
created() {
// second parameter is default value
this.num = appSettings.getNumber("someNumber", null);
this.str = appSettings.getString("someString", "");
this.bool = appSettings.getBoolean("someBoolean", false);
},
methods: {
saveNumber() {
appSettings.setNumber("someNumber", parseFloat(this.num));
dialogs.alert("You saved: " + appSettings.getNumber(
"someNumber"));
},
removeNumber() {
appSettings.remove("someNumber");
dialogs.alert("You removed the number from app settings!");
this.num = null;
},
saveString() {
appSettings.setString("someString", this.str);
dialogs.alert("You saved: " + appSettings.getString(
"someString"));
},
removeString() {
appSettings.remove("someString");
dialogs.alert("You removed the string from app settings!");
this.str = "";
},
saveBoolean() {
appSettings.setBoolean("someBoolean", this.bool);
dialogs.alert(
"You saved: " + appSettings.getBoolean("someBoolean")
);
},
removeBoolean() {
appSettings.remove("someBoolean");
dialogs.alert("You removed the boolean from app settings!");
this.bool = false;
},
removeAll() {
appSettings.clear();
dialogs.alert("All app settings values have been cleared!");
this.num = null;
this.str = "";
this.bool = false;
},
}
};
</script>
画面イメージ
