PhoneGap Local Storage WebSQL, IndexedDB, html5sql, lawnchair

Question

I am trying to figure out the best way to store data in my cross platform app I am developing using PhoneGap.The API instructions suggest using WebSQL however this will no longer be supported, and IndexedDB is currently only for Windows / Blackberry.

There are many different questions on here many of the answers are really old and this, but I cannot seem to find the most popular js library for shipping an app with an existing database? (I.e. a good helper .js to simplify things).

I looked at HTML5SQL but the documentation is very sparse, lawnchair I am not sure about.

Answer 1

I don't know if this question will get flagged for being more preference bound, but I will give my 2 cents if it can help.

I have been able to ship an app with an existing database using SQLite with Phonegap/Cordova. Basically how I did it in Android was using the lite4cordova SQLite plugin:

https://github.com/lite4cordova/Cordova-SQLitePlugin

In the native code on load, I would check the default directory to see if a database with a specific name exists:

try {
        File dbFile = getDatabasePath("data.db");
        Log.v("info", "dbfiledir: " + dbFile.getAbsolutePath());
        if (!dbFile.exists()) {
            this.copy("data.db", dbFile.getAbsolutePath());
        }
    } catch (Exception e) {
        e.printStackTrace();
    }

And if it does not exist, copy the database file from the assets folder to the default database directory:

void copy(String file, String folder) throws IOException {
    File CheckDirectory;
    CheckDirectory = new File(folder);

    String parentPath = CheckDirectory.getParent();

    File filedir = new File(parentPath);
    //File file2 = new File(file);
    //Log.v("info", "filedir: " + file2.getAbsolutePath());
    if (!filedir.exists()) {
        if (!filedir.mkdirs()) {
            return;
        }
    }

    InputStream in = this.getApplicationContext().getAssets().open(file);
    File newfile = new File(folder);
    OutputStream out = new FileOutputStream(newfile);

    byte[] buf = new byte[1024];
    int len;
    while ((len = in.read(buf)) > 0)
        out.write(buf, 0, len);
    in.close();
    out.close();
}

Now when the app loads, it will only copy if the database does not already exist. I can open the database using simply (Syntax may vary depending on plugin):

db = window.sqlitePlugin.openDatabase({
    name : "data"                
});

I will soon be performing the same logic on the iOS side, but I think it should be similarly straightforward.

That being said, there is a plugin listed on http://plugreg.com that provides a helper library for shipping prepopulated databases with WebSQL:

https://github.com/Smile-SA/cordova-plugin-websqldatabase-initializer

I wanted to use SQLite for my project so I opted for the copy on load method. Good luck!

Answer 2

Latest Update: New Cross Platform Cordova WebSQL plugin by MS Open Tech

Microsoft Open Technologies is publishing the new open source WebSQL plugin for Apache Cordova and PhoneGap. This plugin allows developers to integrate a persistent SQL-based local storage solution in their Cordova apps using the exact same JavaScript code across Android, iOS, Windows Phone and Windows Store.