How to pass values from one page to another in single JQM

Question

Im using pageinit for loading the page and storing the parameter globally using localstorage

 $('#testpage').live('pageinit',function(event){
      getsList();
    });

If i press back button the code is here

function backToTest() {
    $.mobile.changePage('#testpage', {
        transition : "pop",
        reverse : false,
        changeHash : false
    });
}

Some questions:

Its not working for multiple page navigation.
Whether local storage is good for this concept?
And passing the local variable into Ajax to access Rest Webservice.

score 3 · Accepted Answer · edited May 23 '17 at 12:28

First, take a look at my other ANSWER.

There you will find chapter: Data/Parameters manipulation between page transitions, you will also find working jsFiddle examples.

This is a short overview:

It is possible to send a parameter/s from one page to another during page transition. It can be done in few ways.

Reference: https://stackoverflow.com/a/13932240/1848600

Solution 1:

You can pass values with changePage:

$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });

And read them like this:

$("#index").live('pagebeforeshow', function () {
    var parameters = $(this).data("url").split("?")[1];;
    parameter = parameters.replace("parameter=","");  
    alert(parameter);
});

This will only work on multi html page format.

Solution 2:

Or you can create a persistent javascript object for a storage purpose. As long ajax is used for page loading (and page is not reloaded in any way) that object will stay active.

var storeObject = {
    firstname : '',
    lastname : ''
}

Example: http://jsfiddle.net/Gajotres/9KKbx/

Solution 3:

You can also access data from the previous page like this:

$('#index').live('pagebeforeshow', function (e, data) {
    alert(data.prevPage.attr('id'));
});

prevPage object holds a complete previous page.

Solution 4:

As a last solution we have a nifty HTML implementation of localStorage. It only works with HTML5 browsers (including Android and iOS browsers) but all stored data is persistent through page refresh.

if(typeof(Storage)!=="undefined") {
    localStorage.firstname="Dragan";
    localStorage.lastname="Gaic";            
}

Example: http://jsfiddle.net/Gajotres/J9NTr/

Probably best solution but it will fail in some versions of iOS 5.X. It is a well know error.

More info

If you want to learn more about this topic take a look at this article. You will find several solutions with examples.