コルドバ-ストレージ

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

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

に4つのボタンを作成します index.htmlファイル。ボタンは内部に配置されます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ファイル内にイベントリスナーを追加します。また、割り当てますwindow.localStorage に 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")); 
}

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

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

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

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

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

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

今、私たちがタップすると GET BY KEY ボタンをクリックすると、次の出力が表示されます。

注意

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

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

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