Cordova - Archiviazione

Possiamo utilizzare l'API di archiviazione disponibile per archiviare i dati sulle app client. Ciò aiuterà l'utilizzo dell'app quando l'utente è offline e può anche migliorare le prestazioni. Poiché questo tutorial è per principianti, ti mostreremo come usarlolocal storage. In uno dei nostri tutorial successivi, ti mostreremo gli altri plugin che possono essere utilizzati.

Passaggio 1: aggiunta di pulsanti

Creeremo quattro pulsanti nel file index.htmlfile. I pulsanti si troveranno all'interno del filediv class = "app" elemento.

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

Produrrà la seguente schermata:

Passaggio 2: aggiunta di listener di eventi

La politica di sicurezza di Cordova non consente eventi in linea, quindi aggiungeremo listener di eventi all'interno dei file index.js. Assegneremo anchewindow.localStorage ad un localStorage variabile che useremo in seguito.

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;

Passaggio 3: creazione di funzioni

Ora dobbiamo creare funzioni che verranno chiamate quando i pulsanti vengono toccati. La prima funzione viene utilizzata per aggiungere dati alla memoria locale.

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

Il prossimo registrerà i dati che abbiamo aggiunto alla console.

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

Se tocchiamo SET LOCAL STORAGEpulsante, imposteremo tre elementi nella memoria locale. Se tocchiamoSHOW LOCAL STORAGE in seguito, la console registrerà gli elementi desiderati.

Creiamo ora una funzione che eliminerà il progetto dalla memoria locale.

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

Se facciamo clic sul file SHOW LOCAL STORAGE dopo aver eliminato il progetto, verrà visualizzato l'output null valore per il campo del progetto.

Possiamo anche ottenere gli elementi di archiviazione locale utilizzando key() metodo che prenderà l'indice come argomento e restituirà l'elemento con il valore di indice corrispondente.

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

Ora quando tocchiamo il GET BY KEY pulsante, verrà visualizzato il seguente output.

NOTA

Quando usiamo il key() metodo, la console registrerà il file job invece di name anche se abbiamo superato l'argomento 0per recuperare il primo oggetto. Questo perché la memoria locale memorizza i dati in ordine alfabetico.

La tabella seguente mostra tutti i metodi di archiviazione locale disponibili.

S.No	Metodi e dettagli
1	setItem(key, value) Utilizzato per impostare l'elemento nella memoria locale.
2	getItem(key) Utilizzato per ottenere l'articolo dalla memoria locale.
3	removeItem(key) Utilizzato per rimuovere l'elemento dalla memoria locale.
4	key(index) Utilizzato per ottenere l'oggetto utilizzando l'estensione indexdell'articolo nella memoria locale. Questo aiuta a ordinare gli elementi in ordine alfabetico.
5	length() Utilizzato per recuperare il numero di elementi esistenti nella memoria locale.
6	clear() Utilizzato per rimuovere tutte le coppie chiave / valore dalla memoria locale.