How Can I pass data between html files not technically on the same domain with phonegap?

Question

EDIT - 8-15

To Refine my questions down:

1.) Can I pass data between two webviews within the same app using localStorage? If not is there a better solution?

2.) Can I use localStorage between a remote domain and local android files? If not is there a better solution?

3.) Does localStorage use cookies? Is this the same as the DOM adapter? I've seen a lot of explanations, some seem contradictory so I think I'm a bit confused about what is actually going on.

---

I'm creating a mobile application using phonegap and apppresser. Essentially, it is just a webview and I have two versions, and online and offline. The online version is sent to www/index.html which then redirects them to my live site. The offline version is assets/offline.html and I am going to make it appear similar to the online version so the user doesn't really know anything is inherently different other than they can no longer do online functions.

Long story short, I am trying to use lawnchair as I've only seen good comments about it and it seems pretty flexible. Let me preface this with lawnchair seems to work. I have tried the dom adapter and can successfully set and retrieve data between pages on the online version, but it does not seem to be able to be retrieved on the the offline version. The code I have used to successfully do this is below:

                    var store = new Lawnchair({
                        adapter: "dom",
                        name: "testing"
                    }, function(store) {
                    });

                    store.exists('events', function(available){
                        var preStr = "";

                        if(available){
                            preStr = "key is already available, ";
                        }else{
                            preStr = "key not available, ";
                        }

                        // create an object
                        var me = <?php echo json_encode($json_posts); ?>;

                        // save it
                        store.save(me);

                        // access it later... even after app restart!
                        store.get('events', function(me) {
                            $("#data").html(preStr + JSON.stringify(me));
                            alert(preStr + JSON.stringify(me));
                        });
                    });

and I used a slightly different variation for the offline version that doesn't save any data. So it kind of boils down to a few questions:

1.) Does lawnchair allow me to persist data on the same mobile application between domains in the webview? I'm not sure what domiain offline.html would be on, but technically index.html (the online version) is setting data on mydomain.com

2.) Is there a better technology I should be using in this scenario to persist data between html files and/or domains?

Answer 1

Currently, here is the best solution I have found. To re-iterate, I am using phonegap and apppresser which allows me to make my wordpress site appear as a mobile app.

In the index.html, my code looks as:

<script src="jquery-2.0.2.js"></script>
<script src="lawnchair-0.6.1.js"></script>
<script type="text/javascript">   
function checkNetConnection(){
 var xhr = new XMLHttpRequest();
 var file = "http://example.com";
 var r = Math.round(Math.random() * 10000);
 xhr.open('HEAD', file + "?subins=" + r, false);
 try {
  xhr.send();
  if (xhr.status >= 200 && xhr.status < 304) {
   return true;
  } else {
   return false;
  }
 } catch (e) {
  return false;
 }
}

    if(checkNetConnection()){
        var store = new Lawnchair({
            adapter: "dom",
            name: "cachedvalues"
        }, function(store) {
        });

        // create an object
        $.get("http://example.com/api/get_posts/?post_type=event&ondate=2014-09-14",function(data){
            data.key = "events";
            alert(data);
            alert(data.key);
            store.save(data);   

            window.location = "http://example.com?appp=1";      
        });


    }else{
        var store = new Lawnchair({
            adapter: "dom",
            name: "cachedvalues"
        }, function(store) {
        });

        store.exists('events', function(available){
            var preStr = "";

            if(available){
                preStr = "key is already available, ";
            }else{
                preStr = "key not available, ";
            }

            // access it later... even after app restart!
            store.get('events', function(me) {
                alert(preStr + JSON.stringify(me));
            });
        });
    }

</script>

And there's the explanations:

function checkNetConnection checks for an internet connection. If it exists, I ping my wordpress site using $.get and I have JSON API plugin installed on my site. I retrieve the post data using JSON API and cache it if the app is online, as this data usually seems to persist between app restarts (this makes me believe the answers to "Can I pass data between two webviews within the same app using localStorage?" and "Can I use localStorage between a remote domain and local android files?" are no).

If the app is not online, then I just try and fetch the already cached data.

Pros:

• Persistent data
• Offline mode for a solution that doesn't usually support it

Cons:

• Have to wait for the $.get to complete before loading the actual page, which can cause the app startup to feel a bit slower and the initial html of the page is shown until $.get finishes (which I hope to alleviate using a splash screen mask)
• User MUST have went to the app with an internet connection at least once (which I hope to alleviate by using static content if no cache is available)
• Customizable solution vs. just plug-n-play

This is my custom solution. It will work for my company's needs. I can't promise it will work the same for others.