Cordova - Stockage

Nous pouvons utiliser l'API de stockage disponible pour stocker des données sur les applications clientes. Cela facilitera l'utilisation de l'application lorsque l'utilisateur est hors ligne et peut également améliorer les performances. Puisque ce tutoriel est destiné aux débutants, nous allons vous montrer comment utiliserlocal storage. Dans l'un de nos derniers tutoriels, nous allons vous montrer les autres plugins qui peuvent être utilisés.

Étape 1 - Ajout de boutons

Nous allons créer quatre boutons dans le index.htmlfichier. Les boutons seront situés à l'intérieur dudiv class = "app" élément.

<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>

Il produira l'écran suivant -

Étape 2 - Ajout d'écouteurs d'événements

La politique de sécurité de Cordova n'autorise pas les événements en ligne, nous allons donc ajouter des écouteurs d'événements dans les fichiers index.js. Nous attribuerons égalementwindow.localStorage à un localStorage variable que nous utiliserons plus tard.

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;

Étape 3 - Création de fonctions

Nous devons maintenant créer des fonctions qui seront appelées lorsque les boutons sont appuyés. La première fonction est utilisée pour ajouter des données au stockage local.

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

Le suivant enregistrera les données que nous avons ajoutées à la console.

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

Si nous tapons SET LOCAL STORAGEbouton, nous allons définir trois éléments sur le stockage local. Si nous taponsSHOW LOCAL STORAGE ensuite, la console enregistrera les éléments que nous voulons.

Créons maintenant une fonction qui supprimera le projet du stockage local.

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

Si nous cliquons sur le SHOW LOCAL STORAGE après avoir supprimé le projet, la sortie affichera null valeur du champ de projet.

Nous pouvons également obtenir les éléments de stockage local en utilisant le key() méthode qui prendra l'index comme argument et retournera l'élément avec la valeur d'index correspondante.

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

Maintenant, quand nous tapons sur le GET BY KEY , la sortie suivante sera affichée.

REMARQUE

Lorsque nous utilisons le key() méthode, la console enregistrera le job à la place du name même si nous avons passé la dispute 0pour récupérer le premier objet. En effet, le stockage local stocke les données par ordre alphabétique.

Le tableau suivant présente toutes les méthodes de stockage local disponibles.

S.Non	Méthodes et détails
1	setItem(key, value) Utilisé pour définir l'élément sur le stockage local.
2	getItem(key) Utilisé pour obtenir l'article à partir du stockage local.
3	removeItem(key) Utilisé pour supprimer l'élément du stockage local.
4	key(index) Utilisé pour obtenir l'article en utilisant le indexde l'article dans le stockage local. Cela permet de trier les éléments par ordre alphabétique.
5	length() Utilisé pour récupérer le nombre d'éléments qui existent dans le stockage local.
6	clear() Utilisé pour supprimer toutes les paires clé / valeur du stockage local.