Storage

Storage

Provides access to the devices storage options.

This API is based on the W3C Web SQL Database Specification and W3C Web Storage API Specification. Some devices already provide an implementation of this spec. For those devices, the built-in support is used instead of replacing it with Cordova's implementation. For devices that don't have storage support, Cordova's implementation should be compatible with the W3C specification.

Methods

Arguments

Objects

Permissions

Android

app/res/xml/plugins.xml

<plugin name="Storage" value="org.apache.cordova.Storage" />

Bada

No permissions are required.

BlackBerry WebWorks

www/config.xml

<feature id="blackberry.widgetcache" required="true" version="1.0.0.0" />

iOS

No permissions are required.

webOS

No permissions are required.

Windows Phone

No permissions are required.

openDatabase

Returns a new Database object.

var dbShell = window.openDatabase(database_name, database_version, database_displayname, database_size);

Description

window.openDatabase returns a new Database object.

This method will create a new SQL Lite Database and return a Database object. Use the Database Object to manipulate the data.

Supported Platforms

Quick Example

var db = window.openDatabase("test", "1.0", "Test DB", 1000000);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Storage Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        var db = window.openDatabase("test", "1.0", "Test DB", 1000000);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Open Database</p>
  </body>
</html>

database_name

The name of the database.


database_version

The version of the database.


database_displayname

The display name of the database.


database_size

The size of the database in bytes.


Database

Contains methods that allow the user to manipulate the Database

Methods

Details

A Database object is returned from a call to window.openDatabase().

Supported Platforms

Transaction Quick Example

function populateDB(tx) {
     tx.executeSql('DROP TABLE IF EXISTS DEMO');
     tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
     tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
     tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}

function errorCB(err) {
    alert("Error processing SQL: "+err.code);
}

function successCB() {
    alert("success!");
}

var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);

Change Version Quick Example

var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.changeVersion("1.0", "1.1");

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Storage Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(populateDB, errorCB, successCB);
    }

    // Populate the database 
    //
    function populateDB(tx) {
         tx.executeSql('DROP TABLE IF EXISTS DEMO');
         tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
         tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
         tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
    }

    // Transaction error callback
    //
    function errorCB(tx, err) {
        alert("Error processing SQL: "+err);
    }

    // Transaction success callback
    //
    function successCB() {
        alert("success!");
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Database</p>
  </body>
</html>

Android 1.X Quirks


SQLTransaction

Contains methods that allow the user to execute SQL statements against the Database.

Methods

Details

When you call a Database objects transaction method it's callback methods will be called with a SQLTransaction object. The user can build up a database transaction by calling the executeSql method multiple times.

Supported Platforms

Execute SQL Quick Example

function populateDB(tx) {
     tx.executeSql('DROP TABLE IF EXISTS DEMO');
     tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
     tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
     tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}

function errorCB(err) {
    alert("Error processing SQL: "+err);
}

function successCB() {
    alert("success!");
}

var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(populateDB, errorCB, successCB);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Storage Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(populateDB, errorCB, successCB);
    }

    // Populate the database 
    //
    function populateDB(tx) {
         tx.executeSql('DROP TABLE IF EXISTS DEMO');
         tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
         tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
         tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
    }

    // Transaction error callback
    //
    function errorCB(err) {
        alert("Error processing SQL: "+err);
    }

    // Transaction success callback
    //
    function successCB() {
        alert("success!");
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>SQLTransaction</p>
  </body>
</html>

SQLResultSet

When the executeSql method of a SQLTransaction is called it will invoke it's callback with a SQLResultSet.

Properties

Details

When you call the SQLTransaction executeSql method its callback methods will be called with a SQLResultSet object. The result object has three properties. The first is the insertId which will return the row number of a success SQL insert statement. If the SQL statement is not an insert then the insertId is not set. The rowsAffected is always 0 for a SQL select statement. For insert or update statements it returns the number of rows that have been modified. The final property is of type SQLResultSetList and it contains the data returned from a SQL select statement.

Supported Platforms

Execute SQL Quick Example

function queryDB(tx) {
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}

function querySuccess(tx, results) {
console.log("Returned rows = " + results.rows.length);
// this will be true since it was a select statement and so rowsAffected was 0
if (!resultSet.rowsAffected) {
  console.log('No rows affected!');
  return false;
}
// for an insert statement, this property will return the ID of the last inserted row
console.log("Last inserted row ID = " + results.insertId);
}

function errorCB(err) {
    alert("Error processing SQL: "+err.code);
}

var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(queryDB, errorCB);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Storage Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Populate the database 
    //
    function populateDB(tx) {
        tx.executeSql('DROP TABLE IF EXISTS DEMO');
        tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
    }

    // Query the database
    //
    function queryDB(tx) {
        tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
    }

    // Query the success callback
    //
    function querySuccess(tx, results) {
  console.log("Returned rows = " + results.rows.length);
  // this will be true since it was a select statement and so rowsAffected was 0
  if (!results.rowsAffected) {
    console.log('No rows affected!');
    return false;
  }
  // for an insert statement, this property will return the ID of the last inserted row
  console.log("Last inserted row ID = " + results.insertId);
    }

    // Transaction error callback
    //
    function errorCB(err) {
        console.log("Error processing SQL: "+err.code);
    }

    // Transaction success callback
    //
    function successCB() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(queryDB, errorCB);
    }

    // Cordova is ready
    //
    function onDeviceReady() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(populateDB, errorCB, successCB);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Database</p>
  </body>
</html>

SQLResultSetList

One of the properties of the SQLResultSet containing the rows returned from a SQL query.

Properties

Methods

Details

The SQLResultSetList contains the data returned from a SQL select statement. The object contains a length property letting you know how many rows the select statement has been returned. To get a row of data you would call the item method specifing an index. The item method returns a JavaScript Object who's properties are the columns of the database the select statement was executed against.

Supported Platforms

Execute SQL Quick Example

function queryDB(tx) {
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}

function querySuccess(tx, results) {
    var len = results.rows.length;
    console.log("DEMO table: " + len + " rows found.");
    for (var i=0; i<len; i++){
        console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
    }
}

function errorCB(err) {
    alert("Error processing SQL: "+err.code);
}

var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(queryDB, errorCB);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Storage Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Populate the database 
    //
    function populateDB(tx) {
        tx.executeSql('DROP TABLE IF EXISTS DEMO');
        tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
        tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
    }

    // Query the database
    //
    function queryDB(tx) {
        tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
    }

    // Query the success callback
    //
    function querySuccess(tx, results) {
        var len = results.rows.length;
        console.log("DEMO table: " + len + " rows found.");
        for (var i=0; i<len; i++){
            console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
        }
    }

    // Transaction error callback
    //
    function errorCB(err) {
        console.log("Error processing SQL: "+err.code);
    }

    // Transaction success callback
    //
    function successCB() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(queryDB, errorCB);
    }

    // Cordova is ready
    //
    function onDeviceReady() {
        var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
        db.transaction(populateDB, errorCB, successCB);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Database</p>
  </body>
</html>

SQLError

A SQLError object is thrown when an error occurs.

Properties

Constants

Description

The SQLError object is thrown when an error occurs when manipulating a database.


localStorage

Provides access to a W3C Storage interface (http://dev.w3.org/html5/webstorage/#the-localstorage-attribute)

var storage = window.localStorage;

Methods

Details

localStorage provides an interface to a W3C Storage interface. It allows one to save data as key-value pairs.

Note: window.sessionStorage provides the same interface, but is cleared between app launches.

Supported Platforms

Key Quick Example

var keyName = window.localStorage.key(0);

Set Item Quick Example

window.localStorage.setItem("key", "value");

Get Item Quick Example

var value = window.localStorage.getItem("key");
// value is now equal to "value"

Remove Item Quick Example

window.localStorage.removeItem("key");

Clear Quick Example

window.localStorage.clear();

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Storage Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        window.localStorage.setItem("key", "value");
        var keyname = window.localStorage.key(i);
        // keyname is now equal to "key"
        var value = window.localStorage.getItem("key");
        // value is now equal to "value"
        window.localStorage.removeItem("key");
        window.localStorage.setItem("key2", "value2");
        window.localStorage.clear();
        // localStorage is now empty
    }


    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>localStorage</p>
  </body>
</html>

Windows Phone 7 Quirks