Android HTML 5 Parameter Passing Between Pages

Developing HTML 5 mobile application for Android is straightforward as we see before, one of the challenges in developing mobile applications using HTML 5 is passing parameters between pages, the main reason for that is some bugs that exist in some Android versions, let's see the possible ways to overcome this issue:

1) Using URL Parameters

In that case while you are routing your screen to another screen add the required parameters to the page URL.
For example:
self.location='itemDetails.html?id=115&type=Y';
In that example we have passed 2 parameters; "id" and "type" with the corresponding values.
This way fail due to Android bug and will mostly show "Page not found!" as it will search for the page that match the whole URL !

2) Using localStorage

In that way submitting the page will save the selected parameters into localStorage and the target page will reload these parameters in its onLoad() method.
For example:
< img src="images/index/84.png" onClick="goDetails(84)">

function goDetails(itemId){
localStorage.setItem("itemId",itemId);
self.location='itemDetails.html';
}

In the target page, load the stored value:

< body onload="init();">

function init(){
      itemId=localStorage.getItem("itemId");
      //do any required logic here ...
}

3) Using Android JavaScriptInterface

In this way we will use the Android code to store the selected parameters as instance variables so we can retrieve them from the target page.

For example:
function goDetails(itemId){
Android.setCurrentId(itemId);
self.location='itemDetails.html';
}
function init(){
  itemId=Android.getCurrentId();

}

And in your Activity add the following JavaScriptInterface methods:

public class MyJavascriptInterface {
    Context mContext;
    String id="114";
    MyJavascriptInterface(Context c) {
            mContext = c;
    }
    @android.webkit.JavascriptInterface
    public String getCurrentId() {
return id;
    }
    @android.webkit.JavascriptInterface
    public void setCurrentId(String current) {
id= current;
    }

....

}

We used the "String id" to store the value..

And add it in the WebView we add our JavaScriptInterface with the prefix as following:
     webView.addJavascriptInterface(new MyJavascriptInterface(this), "Android");