PhoneGap (web mobile app) - Transfer data between pages

Question

I'm developing a PhoneGap application. If you don't know what that is, it's a service that allows you to build mobile-based applications using HTML, CSS and JavaScript.

I have an application, and I've come to a point where I need to transfer information from one page to another. The user chooses an option on the page, the application then loads a new page and based on their option it loads specific content.

Now I do already know a few ways of doing this, to name one.. local storage maybe. My question is, what is the most efficient way of getting information between these two pages? If this were PHP I'd simply using $_GET[''].. but it's not PHP, I'm looking for the best way to do this using HTML, CSS, and JavaScript.

Any help here would be highly appreciated!

Answer 1

There are several possibilities:

1. You are using a service like Phonegap:build or Cordova: You only gonna have one HTML-File where you continously hide and show the different pages. I don't recommend this one, but Phonegap:build and Cordova are great to create a package for all major phones, without headache.

2. URL-Parameters you could pass parameter over the URL to a different HTML-Page. This means you have to open all links with window.location.replace() or change the href -attribute on you anchors. In the next page you have to parse that URL, which is not as easy as in PHP.

3. localStorage / sessionStorage you can easily store data in the sessionStorage. With sessionStorage.myObject = JSON.stringify(complexObject) you can easily store complex objects to the session storage and read them back with var complexObject = JSON.parse(sessionStorage.myObject) . Those are available during you complete session and would be one of the easiest solutions so far.