---
title: "Apache Cordova- storing Data through Apps"
description: "In the series of learning apache Cordova framework using node.js, this article is another step in forward direction that explains the ways to store da"
author: "Anonymous User"
published: 2017-04-17
updated: 2018-03-19
canonical: https://www.mindstick.com/blog/11354/apache-cordova-storing-data-through-apps
category: "apache cordova"
tags: ["mobile development", "apache", "cordova", "apache cordova"]
reading_time: 4 minutes
---
# Apache Cordova- storing Data through Apps
In the series of [learning](https://www.mindstick.com/articles/126221/instructional-design-for-elearning-why-it-is-so-important) apache Cordova [framework](https://www.mindstick.com/forum/34615/software-framework-vs-library) using [node.js](https://www.mindstick.com/articles/1499/upload-and-download-file-in-node-js), this [article](https://www.mindstick.com/articles/95867/are-you-looking-for-500-credit-score-mortgage-lenders-houston-continue-reading-this-article) is another step in forward [direction](https://yourviews.mindstick.com/story/5034/10-animals-with-the-best-sense-of-direction) that explains the ways to store data in an app.
**Also Read[: Introduction to Apache Cordova](https://www.mindstick.com/blog/11351/mobile-application-development-using-apache-cordova)**
You can use [storage](https://www.mindstick.com/articles/44536/finding-your-self-storage-facility) APIs that are available for storing data on the client apps. This will be helpful for the app when the user is offline and also for improving performance of the app. You will be able to know how to store data in an app, also you will learn about the [plugins](https://www.mindstick.com/articles/65049/5-wordpress-plugins-to-help-you-amplify-your-seo-efforts) you can use, in our next article posts.\
**So, here are the steps, for how can you store data:**
**Step 1 - Adding Buttons**
You will have to create four buttons in index.html file. The buttons must be [placed inside](https://www.mindstick.com/forum/12672/binding-all-college-names-to-a-college-dropdownlist-based-on-data-selected-in-another-city-dropdownlist-both-dropdownlists-are-placed-inside-the-datalist) div class = "app" element.
```
GET BY KEYLocal Storage Buttons
```
\
\
**Step 2 - Adding Event Listeners**
You have to add event listeners inside the **index.js** files as Cordova’s security policy doesn't allow inline events. We will also assign window.localStorage to a localStorage variable that we will 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 - Creating Functions**
Now, you will need to create the functions that will be called when the buttons are tapped upon. First function is used for adding data to local storage.
```
function setLocalStorage() {
localStorage.setItem("Name", "John");
localStorage.setItem("Job", "Developer");
localStorage.setItem("Project", "Cordova Project");
}
```
**The next one will log data we added to console.**
```
function showLocalStorage() {
console.log(localStorage.getItem("Name"));
console.log(localStorage.getItem("Job"));
console.log(localStorage.getItem("Project"));
}
```
If we tap **SET LOCAL STORAGE** button, we will set three items to local storage.
If we tap **SHOW LOCAL STORAGE** afterwards, the console will log items that we want.
| John | Index.js:70 |
| --- | --- |
| Developer | Index.js:71 |
| Cordova Project | Index.js:72 |
**Now let's create function that will delete the project from the local storage.**
```
function removeProjectFromLocalStorage() {
localStorage.removeItem("Project");
}
```
If we click **SHOW LOCAL STORAGE** button after we deleted the project, the output will show null value for the project field.
| John | index.js:70 |
| --- | --- |
| Developer | index.js:71 |
| null | index.js:72 |
We can also get the local storage elements by using key() method which will take the index as an argument and return the element with corresponding index value.
```
function getLocalStorageByKey() {
console.log(localStorage.key(0));
}
```
Now when we tap the **GET BY KEY** button we will get the following output.
Job Index.js:83\
**NOTE:**
When we use **key()** method, the console will log job in place of name even though we passed argument 0 to fetch first object. This is happening as data stored in local storage in alphabetical order.
**The following table shows all local storage methods available.**
| S N | Methods & Details |
| --- | --- |
| 1 | **setItem(key, value**) Used for setting the item to local storage |
| 2 | ## getItem(key) Used for getting the item from local storage. |
| 3 | ## removeItem(key) Used for removing the item from local storage. |
| 4 | ## length() Used for retreiving the number of items that exists in local storage. |
| 5 | ## clear() Used for removing all the key/value pairs from local storage. |
| 6 | ## key(index) Used for getting the item by using the index of the item in local storage. Items are sorted alphabetically |
**You may also like: [How to install Apache Cordova](https://www.mindstick.com/blog/11352/how-to-install-and-setup-apache-cordova)**
---
Original Source: https://www.mindstick.com/blog/11354/apache-cordova-storing-data-through-apps
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.