Cordova storage

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>

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.

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.

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.

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.