Question

I’m developing a Phonegap application using jQuery Mobile. It’s a very basic application, its purpose is to show information about a big organization in Spanish and English. On the first page the application shows 2 options, Spanish and English. If the user selects Spanish, the information displayed must be Spanish and vice versa.

Using SQLite DB will probably give some problems on Windows Phones since it is not yet supported (see Phonegap Storage).

There is the File Storage option too. And raw JSON files, as well.

Answer 1

The way I do it is to create a language specific json file to hold all my strings. In this case english.json and spanish.json. Structure the json like:

{ 
    help: "Help",
    ok: "Okay"
}

On the first page of your app when the user clicks the Spanish button for instance it should set a value in localStorage.

localStorage.setItem("lang", "spanish");

Then in the second page once you get the “deviceready” event you should load the correct json file using XHR.

var request = new XMLHttpRequest();
    request.open("GET", localStorage.getItem("lang") + ".json", true);
    request.onreadystatechange = function(){//Call a function when the state changes.
        if (request.readyState == 4) {
            if (request.status == 200 || request.status == 0) {
                langStrings = JSON.parse(request.responseText);
            }
        }
    }
    request.send();

Now whenever you want to use a translated string you get it from langStrings.

langStrings.ok;

Make sense?