Local Storage Object

In our previous section, we covered all the theoretical part of the storage. We had taken a quick view of all the methods of storage, which we will use for it. So, in this section, we will learn about how we can create and use the local storage object in PhoneGap. Below is the step by step procedure to create and use the local storage object.

1) Create a new project

Firstly, we will create a new PhoneGap project with a blank template. If you don’t know how to create an app with a blank template, go through the PhoneGap project link.

After creating a PhoneGap project, we will open its index.html file contained in the www folder.

2) Adding JQuery mobile library

After creating the project, we will add the JQuery mobile library, as we have added in our previous examples. We will go to the JQuery, and from there, we will copy the three lines of code, i.e., CDN hosted files. We will paste this code in our index.html file and change the title in the following way:

  <!DOCTYPE html>  <html>       <head>  <meta charset=”utf-8″>  <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>  <title>Local Storage Object Example</title>  <link rel=”stylesheet” href=”https:://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />  <script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>  <script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>      </head>      <body>          <script type=”text/javascript” src=”cordova.js”></script>      </body>  </html>  

3) Create a form

We will first create a form by creating a label and input field in the body section. After that, we will use this form to store the information. We will write all these things in the following way:

  <body>  <label for=”crick”>Favorite Cricketer</label>         <input type=”text” id=”crick” />          <script type=”text/javascript” src=”cordova.js”></script>  </body>    

4) Adding style/margin and divide the container

Our app is not looking so cool now. So, we will divide the container using <div></div> tag and set the margins for the container in the following way:

Note: We will do the code for the style and margins in the <style></style> tag in the head section.

      <head>  <style>      #container      {          margin: 10px;      }      </style>      </head>      <body>          <div id=”container”>          <label for=”crick”> Favorite Cricketer </label>          <input type=”text” id=”crick” />          <script type=”text/javascript” src=”cordova.js”></script>      </body>  

5) Add button to save data.

Now, we will add a button in our form to save the data into the browser. So, when we will click on the button, the data will be stored into our browser. We will create a button below the input field using the <buuton></button> tag in the following way:

  <div id=”container”>  <label for=”crick”> Favorite Cricketer </label>  <input type=”text” id=”crick” />  <button id=”btnSave”> Save Cricketer </button>  <script type=”text/javascript” src=”cordova.js”></script>  </div>  

6) Getting data from the form

Now, we will grab the form data. For this purpose, we will use the <script></script> tags to create a custom script below the <style></style> tag. We will use the window.onload function, which is called when the screen gets loaded. In this function, we will get the button and use an event listener to callback the custom function storeData in the following way:

  <script>  window.onload = function()  {          document.getElementById(‘btnSave’).addEventListener(‘click’, storeData);  }  </script>   

7) Creating storeData custom function

Now, we will create a custom function storeData by passing an argument. We will fetch the cricketer name from the form using the ID. After that, we will set the fetched data into the local storage in the following way:

  function storeData(e)  {  var cricketer = document.getElementById(‘crick’).value;  localStorage.setItem(“favorite Cricketer”, cricketer);  }  

We can check the local storage data using our browser.

We can also save other data under different key in the following way:

8) Retrieving data

Now, we will create another button to retrieve the data in the same way as we have previously created for getting the data. After that, we will get the button using the ID that will be called using the function, i.e., getData. We will also add a field for the result using <div></div> tag in the following way:

Window.onload function:

  window.onload = function()  {  document.getElementById(‘btnSave’).addEventListener(‘click’, storeData);document.getElementById(‘btnRetrieve’).addEventListener(‘click’, getData)  }  

Body section:

  <body>  <div id=”container”>  <label for=”crick”> Favorite Cricketer </label>  <input type=”text” id=”crick” />  <button id=”btnSave”> Save Cricketer </button>  <script type=”text/javascript” src=”cordova.js”></script>  <div id=”result”></div>  <button id=”btnRetrieve”> Retrieve Cricketer </button>  </div>  </body>  

9) Creating getData function

We will create the getData function in the <script></script> tag that will be called by the retrieve button. We will use the localStorage.getItem() function to get data from the local storage and show the result using the ID. The complete custom script is shown below.

  <script>  window.onload = function()  {  document.getElementById(‘btnSave’).addEventListener(‘click’, storeData);  document.getElementById(‘btnRetrieve’).addEventListener(‘click’, getData)  }          function storeData(e)  {  var cricketer = document.getElementById(‘crick’).value;  localStorage.setItem(“favorite Cricketer”, cricketer);  var date = new Date();  localStorage.setItem(“TimeStamp”, date);  }  function getData(e)  {  var crick = localStorage.getItem(‘favorite Cricketer’);  document.getElementById(‘result’).innerHTML = crick;  }  </script>  

Download complete project

Next TopicCreating table & storing data

Local Storage Object in PhoneGap