Client-side Storage

Das wichtigste Argument einer App gegenüber einer reinen Web-Anwendung ist natürlich das speicher von Daten und somit die Nutzbarkeit auch ohne eine Internet-Verbindung.
Hierfür gibt es mehrere Möglichkeiten

localStorage & sessionStorage

Hierbei handelt es sich um einen simplen key/value Speicher mit einer unterschiedlichen Haltbarkeit der gespeicherten Daten.
Während der sessionStorage beim Beenden der App gelöscht wird ist der localStorage auch darüber hinaus verfügbar.
Der Zugriff auf die Daten erfolgt entweder über die Methoden setItem('key', 'value') / getItem('key') oder über die Notation sessionStorage.key.

localStorage.setItem('key', 'localValue'); 
var localKey = localStorage.key; 
sessionStorage.key = 'sessionValue'; 
var sessionKey = sessionStorage.getItem('key');

Die zugewiesenen Werte werden jeweils als String gespeichert. Somit sollte beim Zuweisen und Auslesen der Daten eine entsprechende Umwandlung bedacht werden.
Generell bietet sich der localStorage aber an um einfache Datensätze in der App bereit zu halten.
Bis zu einem gewissen Grad ist es auch durchaus praktikabel ein größeres JSON-Objekt direkt als String im localStorage zu speichern.

lokale Datenbanken

Bei größeren Datenmengen, die eventuell auch noch dursucht werden sollen, ist eine Datenbank die bessere Alternative.
Je nach Zielplattform können eine WebSQL oder eine IndexedDB Datenbank genutzt werden.
Die IndexedDB hat als Ziel JSON-Objekte zu speichern, aber durch die fehlende Unterstützung unter iOS ist das eher selten die Variante die Sinn macht.

Die WebSQL Datenbank wird zwar unter WindowsPhone auch nur durch Verwendung eines Plugins unterstützt, aber die Einschränkung ist da wesentlich geringer.
Erstellt wird die Datenbank durch den Befehl

var name = 'demo';
var version = '1.0';
var displayName = 'Cordova Demo-DB';
var estimatedSize = 5 * 1024 * 1024; // bytes

var created = function(){
    console.log('created Database');
}

var db = window.openDatabase(name, version, displayName, estimatedSize, created);

Bei den Parametern gilt folgendes:

• Der name muss eindeutig sein.
• Über die version lassen sich Änderungen an der Struktur vornehmen, falls sich diese in einer neueren Version geändert haben.
• Der displayName kann frei gewählt werden.
• Bei der estimatedSize kann es je nach Plattform auch mal passieren das der Wert vom webview Container ignoriert wird.
• created wird nach Erstellung der Datenbank aufgerufen.

Die Grenzwerte für die den kombinierten Speicherplatz von localStorage und WebSQL liegen nach meiner Erfahrung bei:

• 5MB auf einem BlackBerry 10
• 50MB unter iOS
• 200MB unter android

Je nach Version des Betriebssytems können die Werte eventuell abweichen.

Wenn die Datenbank erfolgreich erstellt wurde können auf das db Objekt Transaktionen aufgerufen werden. Bevor Daten gespeichert werden können müssen natürlich zuerst Tabellen erstellt werden.

db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS demo (id unique, text)');
   tx.executeSql('INSERT INTO demo (id, text) VALUES (1, "ionic rocks!")');
});

Danach sollte man in der Entwicklerkonsole den entsprechenden Eintrag finden.

Abgerufen werden die Daten wieder über sql-Queries. Die einzelnen Felder des ResultSets können als Attribut angesprchen werden.

db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM demo', [], function (tx, results) {
    var len = results.rows.length, i;
    for (idx = 0; idx < len; idx++) {
        console.log(results.rows.item(idx).text);
    }
    });
});