Saturday, 5 December 2020

How to store data in PhoneGap?

PhoneGap Storage

We have to deal with data storage when we start building real-time apps. The mobile environment allows us to store data in two ways. i.e., on a different server or locally on our device. The server on which the data is stored is based on the type of data, volume, and requirements. For instance, if we want to store a little bit of data required frequently, it would be best to store it on our mobile device. The server side storing of data is good when we have a large volume of data to store, retrieve, and update.

If we know HTML5, we can either use the localStorage object or sessionStorage object. We can use these object for data storage purposes in PhoneGap because it uses HTML5. The localStorage object is used to store data permanently on our mobile device, and the sessionStorage object is used to store data for a particular session on our mobile device. Apart from these two ways, we can also store data on the server.

localStorage object

The localStorage object stores the data permanently on our device without an expiry. The data stored on the mobile device will be available even if we close our application and try to get it even six months after. The data is stored in key/value pairs in localStorage. The user experience gets improved significantly when we store data using the localStorage object. This is because the required data can be fetched so fast without waiting for network connectivity or any other related issues.

The localStorage object provides three methods to work with data, i.e., setItem, getItem, and removeItem.

The setItem method is used to store the data. In this method, we will pass two parameters.
1. The first parameter is the name of the key.
2. The second parameter is the value to be stored.
The getItem method is used to get the data stored on the device. In this method, we have to pass the name of the key to fetch its corresponding value.
The removeItem method is used to delete a particular data. In this method, we have to pass the name of the key to remove it.

We will write it in the following way:

window.localStorage.setItem

sessionStorage Object

Like the localStorage object, the sessionStorage object also provides three methods to deal with data, i.e., setItem, getItem, and removeItem. All these three methods work in the same way as they work in the localStorage object. For sessionStorage, we will write it in the following way:

window.sessionStorage.setItem

localStorage

Provides access to a W3C Storage interface (http://dev.w3.org/html5/webstorage/#the-localstorage-attribute)

var storage = window.localStorage;

Methods

key: Returns the name of the key at the position specified.
getItem: Returns the item identified by it's key.
setItem: Saves and item at the key provided.
removeItem: Removes the item identified by it's key.
clear: Removes all of the key value pairs.

Details

localStorage provides an interface to a W3C Storage interface. It allows one to save data as key-value pairs.

Supported Platforms

Android
BlackBerry WebWorks (OS 6.0 and higher)
iPhone

Key Quick Example

var keyName = window.localStorage.key(0);

Set Item Quick Example

window.localStorage.setItem("key", "value");

Get Item Quick Example

var value = window.localStorage.getItem("key");
// value is now equal to "value"

Remove Item Quick Example

window.localStorage.removeItem("key");

Clear Quick Example

window.localStorage.clear();

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Contact Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
        window.localStorage.setItem("key", "value");
        var keyname = window.localStorage.key(i);
        // keyname is now equal to "key"
        var value = window.localStorage.getItem("key");
        // value is now equal to "value"
        window.localStorage.removeItem("key");
        window.localStorage.setItem("key2", "value2");
        window.localStorage.clear();
        // localStorage is now empty
    }


    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>localStorage</p>
  </body>
</html>

C# Programming Tutorial(8920128728)