Skip to main content
Agregados ejemplos
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

localStorage: Ya lo descartaste. El tamaño máximo de almacenamiento es alrededor de 5 Mb y si esperas un volumen de datos mayor que ese ya no es una opción. Si el volumen de datos es menor que este úsalo!!! La razón es máxima compatibilidadcompatibilidad con todas las plataformas que es uno de los puntos fuertes de cordovacordova.

Como puedes comprobar es exactamente la misma sintáxis que puedes encontrar aquí

Operaciones

La lista detallada de las operaciónes está aquí

Crear tabla

db.executeSQL('CREATE TABLE IF NOT EXISTS MiTabla (columna1, columna2)')

Insertar datos

db.executeSql('INSERT INTO MiTabla VALUES (?,?)', ['dato1', 'dato2'])

Consultar

db.executeSql('SELECT columna1 FROM MiTabla')

Actualizar

db.executeSql('UPDATE MiTabla SET columna2 = ? WHERE columna1 = ?', ['actualizado', 'dato1'])

Eliminar datos

db.executeSql('DELETE FROM MiTabla WHERE columna1 = ?', ['dato1'])

Crear transacción

db.transaction(function(trans) {
    // Callback con la transacción creada
    trans.executeSQL('....')
}, function(err) {
    // Callback de error
}, function() {
    // Callback despues que ha hecho comit la transacción
    // Si vas a cerrar la base de datos debe ser aquí
});

Batch de operaciones

db.sqlBatch([
  'CREATE TABLE IF NOT EXISTS MiTabla (columna1, columna2)',
  [ 'INSERT INTO MiTabla VALUES (?,?)', ['dato1', 'dato2'] ],
]);

Cerrar conexión

db.close()

El ejemplo que te pongo a continuación no es directamente del plugin ya que existen varios ejemplos ya del tema sino de $cordovaSQLite que es un wrapper de angular 1 para dicho plugin que se usa con ionic y Ionic NativeIonic Native que se usa con Angular2Angular2 y TypeScriptTypeScript

Ionic y Ng-CordovaIonic y Ng-Cordova

Ionic NativeIonic Native

localStorage: Ya lo descartaste. El tamaño máximo de almacenamiento es alrededor de 5 Mb y si esperas un volumen de datos mayor que ese ya no es una opción. Si el volumen de datos es menor que este úsalo!!! La razón es máxima compatibilidad con todas las plataformas que es uno de los puntos fuertes de cordova.

Como puedes comprobar es exactamente la misma sintáxis que puedes encontrar aquí

El ejemplo que te pongo a continuación no es directamente del plugin ya que existen varios ejemplos ya del tema sino de $cordovaSQLite que es un wrapper de angular 1 para dicho plugin que se usa con ionic y Ionic Native que se usa con Angular2 y TypeScript

Ionic y Ng-Cordova

Ionic Native

localStorage: Ya lo descartaste. El tamaño máximo de almacenamiento es alrededor de 5 Mb y si esperas un volumen de datos mayor que ese ya no es una opción. Si el volumen de datos es menor que este úsalo!!! La razón es máxima compatibilidad con todas las plataformas que es uno de los puntos fuertes de cordova.

Como puedes comprobar es exactamente la misma sintáxis que puedes encontrar aquí

Operaciones

La lista detallada de las operaciónes está aquí

Crear tabla

db.executeSQL('CREATE TABLE IF NOT EXISTS MiTabla (columna1, columna2)')

Insertar datos

db.executeSql('INSERT INTO MiTabla VALUES (?,?)', ['dato1', 'dato2'])

Consultar

db.executeSql('SELECT columna1 FROM MiTabla')

Actualizar

db.executeSql('UPDATE MiTabla SET columna2 = ? WHERE columna1 = ?', ['actualizado', 'dato1'])

Eliminar datos

db.executeSql('DELETE FROM MiTabla WHERE columna1 = ?', ['dato1'])

Crear transacción

db.transaction(function(trans) {
    // Callback con la transacción creada
    trans.executeSQL('....')
}, function(err) {
    // Callback de error
}, function() {
    // Callback despues que ha hecho comit la transacción
    // Si vas a cerrar la base de datos debe ser aquí
});

Batch de operaciones

db.sqlBatch([
  'CREATE TABLE IF NOT EXISTS MiTabla (columna1, columna2)',
  [ 'INSERT INTO MiTabla VALUES (?,?)', ['dato1', 'dato2'] ],
]);

Cerrar conexión

db.close()

El ejemplo que te pongo a continuación no es directamente del plugin ya que existen varios ejemplos ya del tema sino de $cordovaSQLite que es un wrapper de angular 1 para dicho plugin que se usa con ionic y Ionic Native que se usa con Angular2 y TypeScript

Ionic y Ng-Cordova

Ionic Native

Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

Mi recomendación es una sola, usa SQLite. En la página oficial te dan unas cuantas razones muy convincentes pero yo solo me voy a concentrar en una sola

Muchas aplicaciones usan SQLite como un cache de contenido relevante de un RDBMS. Esto reduce la latencia ya que muchas de las queries ocurren ahora contra la cache local y evitan el viaje ida-vuelta en la red. Esto reduce la carga de la red en el servidor central de base de datos y en muchos casos significa que la aplicación puede continuar aun sin conexión de red.

Usualmente es muy buena idea diseñar tu aplicación de forma tal que todas las llamadas ajax las hagas a un api remoto (idealmente que sea RESTFUL ya que encaja perfectamente con la tecnología móvil) y luego insertar una cache que almacene automáticamente los datos para que no sea necesario volver a hacer consultas. La ventaja de esta arquitectura es que puedes cambiar el mecanismo de almacenamiento o cache en las versiones futuras, o simplemente quitarlo y tu aplicación "siempre funciona" sin importar las condiciones.

La razón por la que no recomiendo las demás:

localStorage: Ya lo descartaste. El tamaño máximo de almacenamiento es alrededor de 5 Mb y si esperas un volumen de datos mayor que ese ya no es una opción. Si el volumen de datos es menor que este úsalo!!! La razón es máxima compatibilidad con todas las plataformas que es uno de los puntos fuertes de cordova.

WebSql: Es obsoleto.

Este documento estaba en la lista de recomendación de W3C pero todo el trabajo ha cesado. La especificación ha llegado a un impass: todos los implementadores interesados han usado el mismo backend SQL(Sqlite), pero necesitamos múltiples implementaciones independientes para poder continuar con el trabajo de estandarización.

Como ves todos se han decantado por SQLite además de no soportar Windows Phone y otras plataformas. Normalmente me he encotrado que es muy bueno usar crosswalk en conjunto con cordova (puedes obtener aceleración por hardware y capacidades como WebRtc) y puedes encontrarte que en el futuro este API deje de existir ya que el crosswalk lo que hace es integrar tu aplicación con la última versión de Chromium disponible.

IndexedDB: No soporta IOS que es uno de tus requerimientos por lo que no entra en las consideraciones. Usualmente cuando se trabaja con aplicaciones de cordova de trata de obtener máxima compatibilidad y Android y IOS siempre son los dos primeros candidatos a considerar.

En el repo de github del plugin puedes encontrar ejemplos del API. Hay que mencionar que este API aunque trabaja con SQLite internamente es un reemplazo al API de WebSql con algunas diferencias bien documentadas por lo que la referencia oficial y los tutoriales te puede servir como fuente de documentación.

db = window.sqlitePlugin.openDatabase({name: 'prueba.db', location: 'default'});
db.executeSql('INSERT INTO Tabla VALUES (?,?)', ['Dato1', 'Dato2'], 
    function() {
        console.log('Insertado');
    }, 
    function(error) {
        console.log('Error');
});

Como puedes comprobar es exactamente la misma sintáxis que puedes encontrar aquí

El ejemplo que te pongo a continuación no es directamente del plugin ya que existen varios ejemplos ya del tema sino de $cordovaSQLite que es un wrapper de angular 1 para dicho plugin que se usa con ionic y Ionic Native que se usa con Angular2 y TypeScript

Ionic y Ng-Cordova

var db = $cordovaSQLite.openDB({ name: 'prueba.db' });
$cordovaSQLite.execute(db, 'INSERT INTO Tabla VALUES (?,?)', ['Dato1', 'Dato2'])
    .then(function(res) {
        console.log('Insertado');
    })
    .catch(function (err) {
        console.error('error');
    });

Ionic Native

import { SQLite } from 'ionic-native';

let db = new SQLite();
db.openDatabase({
    name: 'prueba.db',
    location: 'default'
}).then(() => {
    return db.executeSql('INSERT INTO Tabla VALUES (?,?)', ['Dato1', 'Dato2']);
}).then(() => {
    console.log('Insertado');
}, (err) => {
    console.log('Error');
});;