Cordova-ストレージ

クライアントアプリにデータを保存するために利用可能なストレージAPIを使用できます。これにより、ユーザーがオフラインのときにアプリを使用できるようになり、パフォーマンスも向上します。このチュートリアルは初心者向けであるため、*ローカルストレージ*の使用方法を示します。後のチュートリアルの1つで、使用できる他のプラグインを紹介します。

ステップ1-ボタンの追加

*indexl* ファイルに4つのボタンを作成します。 ボタンは *div class = "app"* 要素内に配置されます。

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

それは次の画面を生成します-

ローカルストレージボタン

手順2-イベントリスナーの追加

Cordovaセキュリティポリシーはインラインイベントを許可しないため、index.jsファイル内にイベントリスナーを追加します。また、後で使用する localStorage 変数に window.localStorage を割り当てます。

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage);
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage);
document.getElementById("removeProjectFromLocalStorage").addEventListener
   ("click", removeProjectFromLocalStorage);
document.getElementById("getLocalStorageByKey").addEventListener
   ("click", getLocalStorageByKey);
var localStorage = window.localStorage;

ステップ3-関数の作成

次に、ボタンがタップされたときに呼び出される関数を作成する必要があります。最初の関数は、ローカルストレージにデータを追加するために使用されます。

function setLocalStorage() {
   localStorage.setItem("Name", "John");
   localStorage.setItem("Job", "Developer");
   localStorage.setItem("Project", "Cordova Project");
}

次は、コンソールに追加したデータを記録します。

function showLocalStorage() {
   console.log(localStorage.getItem("Name"));
   console.log(localStorage.getItem("Job"));
   console.log(localStorage.getItem("Project"));
}

[ローカルストレージの設定]ボタンをタップすると、3つのアイテムがローカルストレージに設定されます。その後、 SHOW LOCAL STORAGE をタップすると、コンソールは必要な項目を記録します。

ローカルストレージログ

ローカルストレージからプロジェクトを削除する関数を作成しましょう。

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

プロジェクトを削除した後に[ローカルストレージの表示]ボタンをクリックすると、プロジェクトフィールドの null 値が出力に表示されます。

Show Local Storage 2

また、インデックスとして引数を取り、対応するインデックス値を持つ要素を返す* key（）*メソッドを使用して、ローカルストレージ要素を取得することもできます。

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

*GET BY KEY* ボタンをタップすると、次の出力が表示されます。

ローカルストレージキーの表示

NOTE

key（）メソッドを使用すると、引数 *0 を渡して最初のオブジェクトを取得した場合でも、コンソールは name ではなく job を記録します。これは、ローカルストレージがアルファベット順にデータを保存しているためです。

次の表に、使用可能なすべてのローカルストレージメソッドを示します。

S.No	Methods & Details
1	setItem(key, value) アイテムをローカルストレージに設定するために使用されます。
2	getItem(key) ローカルストレージからアイテムを取得するために使用されます。
3	removeItem(key) ローカルストレージからアイテムを削除するために使用されます。
4	key(index) ローカルストレージ内のアイテムの index を使用してアイテムを取得するために使用されます。これは、アイテムをアルファベット順に並べ替えるのに役立ちます。
5	length() ローカルストレージに存在するアイテムの数を取得するために使用されます。
6	clear() ローカルストレージからすべてのキー/値ペアを削除するために使用されます。

Cordova-storage

目次

Cordova-ストレージ

ステップ1-ボタンの追加

手順2-イベントリスナーの追加

ステップ3-関数の作成

NOTE