Phonegap Offline Database Phonegap Offline Database sqlite sqlite

Phonegap Offline Database


I made an app recently that required this, targetting the same OS's. You can use a combination of 2 databases :

1. LocalStorage ::

Check for localStorage

function supports_html5_storage() {  try {    return 'localStorage' in window && window['localStorage'] !== null;  } catch (e) {    return false;  }}

Set an item into LocalStorage

localStorage.setItem("bar", foo);

or

localStorage["bar"] = foo;

Get an item from LocalStorage

var foo = localStorage.getItem("bar");

or

var foo = localStorage["bar"];

2. SQLite Database (more convenient, more persistive)

Set up your DB

var shortName = 'BHCAppDB'; var version = '1.0'; var displayName = 'BHCAppDB'; var maxSize = 65535; if (!window.openDatabase){      alert('!! Databases are not supported in this Device !! \n\n We are sorry for the inconvenience and are currently working on a version that will work on your phone'); }db = openDatabase(shortName, version, displayName,maxSize);createAllTables(db);

Create your Tables

function createAllTables(db){    db.transaction(function(transaction){        transaction.executeSql("CREATE TABLE IF NOT EXISTS Profile(id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT, gender TEXT,age INTEGER)");}

Execute an SQL Query

transaction(function(transaction){        var rowCount = 'SELECT * FROM Profile';        transaction.executeSql(rowCount,[],function(transaction,result){            if(result.rows.length == 0){                var sqlString = 'INSERT INTO Profile (name,gender,age) VALUES("自己","Female",18)';                transaction.executeSql(sqlString);            }        });    });

EDIT :: I forgot to add in the last option :)

3. Native Storage on all devices

This is the best part of Phonegap. You can call a native plugin class on all the devices using the Phonegap plugin call. During the call, you can pass parameters to the class, and the native class can store your data in the OS itself.

For example :: in iOS, you create a plugin .h & .m class and register it with the Cordova.plist file. Once that's done, you need to send a call to the class from JavaScript using Phonegap. Once the parameters have been received using NSDictionary or any other NSArray type, you can call a CoreData class to store UNLIMITED amounts of data. You'll never run out of memory .

This can be done in a similar fashion for all the rest of the OS's also :)

For Encryption try the following :: SQLCipher

Here is some additional information on working with an existing SQLite database. In this example encrypted.db is that brand new database you create and pragma.

ATTACH DATABASE 'encrypted.db' AS encrypted KEY 'secret'; -- create a new encrypted databaseCREATE TABLE encrypted.t1(a,b); -- recreate the schema in the new database (you can inspect all objects using SELECT * FROM sqlite_master)INSERT INTO encrypted.t1 SELECT * FROM t1; -- copy data from the existing tables to the new tables in the encrypted databaseDETACH DATABASE encrypted;


In the W3C specification for webdatabase it is mentioned that the Web Applications Working Group continues work on two other storage-related specifications: Web Storage and Indexed Database API.

So the webdatabase specification is no longer active but the other two specifications are active.

The Web Storage can be used to store data locally within the user's browser. There are the following objects to achieve that:

  • localStorage which stores data without expiration date
  • sessionStorage which stores data for one session

The Web Storage is not recommended for your case (more than 100MB), because the W3C specification mentions that:

A mostly arbitrary limit of five megabytes per origin is recommended.

In my opinion SQLite is the best available option since it is a in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. Moreover the SQLite limits seems to cover your needs:

The largest possible setting for SQLITE_MAX_PAGE_COUNT is 2147483646. When used with the maximum page size of 65536, this gives a maximum SQLite database size of about 140 terabytes.

Regarding your encryption requirements you should consider the SQLCipher which is an SQLite extension.

SQLCipher is an SQLite extension that provides transparent 256-bit AES encryption of database files. To date, it has been open-sourced, sponsored and maintained by Zetetic LLC. In the mobile space, SQLCipher has enjoyed widespread use in Apple’s iOS, as well as Nokia / QT for quite some time.

An alternative option is to encrypt and decrypt your data when writing and reading your database.

I hope this helps.


The mobile app I am working on has a similar requirement. It requires offline access to a parts table that contains nearly 500,000 different parts in it. The source for this table is extracted from the server by getting its JSON via a well defined GET URL.

I considered Indexed DB but the mobile browsers inside iOS and Android don't support this. Web local storage is not an option because of its hard 5 MB limit. So, I decided to use the Web SQL Database standard (http://www.w3.org/TR/webdatabase/) even though its deprecated. My experience so far with using Web SQL Database has been very good. Database operations perform very well and are very reliable on the mobile devices I support (iPad 2, iPad 3, Motorola Xyboard, Samsung Galaxy Tab 2). Plus, Phonegap exposes a JavaScript API to work with this standard (see http://docs.phonegap.com/en/2.5.0/cordova_storage_storage.md.html#Storage).

I wrote a Java utility that converts the downloaded JSON data into a SQLite database whose files are packaged as part of the Android APK or the iOS app package.

When my Phonegap mobile app starts, it uses native code to check the app's private data directory for the presence of the SQLite database files. If the files are not present, the native code copies the database files from the app package.

My implementation is based on the sample code I found at the link below. I hope this helps. Let me know if you have any questions about my particular implementation.

http://gauravstomar.blogspot.com/2011/08/prepopulate-sqlite-in-phonegap.html