はじめに

NativeScript でデータの 保存/読み出し を行う方法を整理した。

TL;DR

  • ApplicationSettings を使う
    • const appSettings = require("tns-core-modules/application-settings");
    • appSettings.getXXXX, appSettings.setXXXX, appSettings.hasKey, etc

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
  5. まとめ
  6. その他・メモ
    1. その他の方法
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.3
BuildVersion: 19D76

$ node -v
v12.7.0

$ npm -v
6.10.3

$ tns --version
6.4.0

$ grep -C1 version package.json
"tns-ios": {
"version": "6.0.1"
},
"tns-android": {
"version": "6.0.0"
}
  • iPhone 11 Pro: iOS 13.3
  • Android HUAWEI nova lite 2: Android 9 (ビルド 9.1.0.160)

詳細

一番シンプルな方法は公式ガイドに書かれている通り、ApplicationSettings を使う方法。
参考: Client-Side Storage in NativeScript Applications

getNumber, setNumber, hasKey, remove などのメソッドで、localStorage のようにアクセスが可能。

なお、getXXXX は第2引数を設定することで、データ未設定時のデフォルト値を設定可能。

以下は、ページの表示回数を 読み出し/更新 するサンプル。
コミット: 4033286d24fa31918ed41a2ff9239eddb8483cf7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script >
const appSettings = require("tns-core-modules/application-settings");
export default {
data() {
return {
access: 0,
};
},
mounted() {
this.access = appSettings.getNumber("access", 0) + 1;
appSettings.setNumber("access", this.access);
},
}
</script>

まとめ

  • ApplicationSettings を使う
    • const appSettings = require("tns-core-modules/application-settings");
    • appSettings.getXXXX, appSettings.setXXXX, appSettings.hasKey, etc

その他・メモ

その他の方法

他にも、下記の方法やプラグインがある

参考文献

関連記事