Pass parameters in JQM- page refresh

Question

i pass a parameter to a page, and retrieve using the data-url attribute, it works fine. But, if i refresh that page, the url parameter will not be available. What should be done for this. Pls help.

Answer 1

You could store the url parameter in HTML5's localStorage. Generally, localStorage is supported by all browsers (including mobile) except IE, where it has some stability issues.

To store the url parameter,

window.localStorage.setItem("param", yourParam);

Then later, check if the item exists in the localStorage, if yes, get it from there and use.

if(window.localStorage["param"] != undefined)
{
  var param= window.localStorage["param"];
}

Full workflow

var param = "", local = window.localStorage;
if(local["param"] != undefined)
{
  param = local["param"];
}
else
{
 //store the param in a database/in the server session and retrieve from there.
 param = getFromServer();

 //set item in localStorage
 local.setItem("param", yourParam);
}

For more info, go to this link

Answer 2

The workaround for this issue is to check whether the data("url") contains a question mark ?. If not you can retrieve the parameter values from the window.location.href.

This code:

$.mobile.changePage('car-details.html', {
    data: {
        id: 'my_id'
    }
});

creates the URL: .../car-details.html?id=my_id

The below code handles the case of normal transition and the case of page refresh. In case of page refresh the parameter value is retrieved from window.location.href

var passedId = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href ).replace( /.*id=/, "" );

For a complete example check this StackOverflow answer