Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Cordova storage


May 21, 2021 Cordova


Table of contents


We can use the storage API to store data on the client application. /b10> This will help users use the application while they are offline, and it can also improve performance. /b11> Since this is a beginner tutorial, we'll show you how to use local storage. /b12> In our later tutorials, we'll show you the other plug-ins you can use.

Step 1 - Add a button

We'll .html four buttons in the index file. /b10> The button will be inside the div class "app" element.

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

Cordova storage

Step 2 - Add an event listener

Cordova security policy does not allow inline events, so we'll .js event listeners to the index file. /b10> We also assign window.localStorage to the localStorage variable that we'll use later.

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;	

Step 3 - Create a function

Now we need to create a function that is called when the button is pressed. /b10> The first function is used to add data to the local store.

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

The next one will record the data we added to the console.

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

If we click the SET LOCAL STORAGE button, we will set up three items to store locally. /b10> If we click SHOW LOCAL STORAGE, the console will record the items we want.

Cordova storage

Now let's create a function that removes the item from the local store.

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

If we click the SHOW LOCAL STORAGE button after deleting the item, the output will show the null value of the item field.

Cordova storage

We can also use the key() method to get the local storage element, which takes the index as an argument and returns the element with the corresponding index value.

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

Now, when we click the GET BY KEY button, we get the following output.

Cordova storage

Attention

When we use the key() method, the console logs the job, not name, to retrieve the first object, even if we pass parameter 0. /b11> This is because local storage stores data in alphabetical order.

The following table shows all available local storage methods.

Serial number Method and description
1

setItem(key´╝îvalue)

Used to set the project to local storage

2

getItem(key)

Used to get items from local storage.

3

removeItem(key)

Used to remove items from local storage.

4

key(index)

Used to get items by using the index of items in the local store. Items are sorted alphabetically

5

length()

Used to retrieve the number of items that exist in the local store.

6

clear()

Used to remove all key/value pairs from the local store.