27

He desarrollado aplicaciones para dispositivos móviles Android con Cordova que han utilizado localStorage para guardar los datos, porque eran pequeñas cantidades(configuración, records y mejores puntuaciones, etc.) y, hasta ahora, no he tenido ningún problema.

Ahora estoy desarrollando un pequeño juego de trivial que se publicaría en Android e iOS, y voy a tener una gran cantidad de datos (preguntas y respuestas). Mi idea era descargar los datos de un servidor cuando arranque por primera vez el juego y guardarlos en una base de datos interna donde pueda realizar operaciones con ellos.

En la página web sobre almacenamiento en Cordova se mencionan diferentes opciones:

  • localStorage
  • WebSQL
  • IndexedDB
  • SQLite (via plugin)

De esas he descartado IndexedDB (porque según la documentación, no funciona en iOS) y localStorage (porque el espacio es limitado y me da miedo que el dispositivo pueda borrar los datos si necesita espacio).

Y de las restantes, WebSQL y SQLite:

  • ¿Cuáles son las ventajas e inconvenientes de cada una de ellas?
  • ¿Hay alguna ventaja/inconveniente de usar una sobre la otra?
  • ¿Existen problemas de integración con alguna de esas plataformas?

Y, aunque sé que esta parte puede salirse un poco del alcance del sitio, ¿existe alguna alternativa que no se mencione en esa página web y que deba tener en cuenta?

Valoraría positivamente si se pudieran añadir ejemplos de código para las operaciones básicas: crear base de datos y tablas, insertar datos y buscar datos.

2
  • 2
    Podrías leer un poco de LokisJS aquí hay algo
    – x4mp73r
    Commented el 16 ago. 2016 a las 17:57
  • @x4mp73r parece interesante, le voy a echar un ojo
    – Alvaro Montoro
    Commented el 17 ago. 2016 a las 0:43

6 respuestas 6

21
+250

Y de las restantes, WebSQL y SQLite:

¿Cuáles son las ventajas e inconvenientes de cada una de ellas?

WebSQL:

  • Lamento informarte que la especificación de WebSQL ha sido dado de baja por la W3C: https://www.w3.org/TR/webdatabase/

    "This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path."

    En español:

    "Este documento estaba en la pista Recomendación W3C, pero el trabajo de especificación se ha detenido. La especificación llegó a un callejón sin salida: todos los implementadores interesados han utilizado el mismo servidor SQL (SQLite), pero necesitamos múltiples implementaciones independientes para proceder a lo largo de una trayectoria de normalización."

  • A pesar que hay soporte en iOS, ni Microsoft, ni Mozilla le han dado soporte hasta la fecha, referencia: http://caniuse.com/#search=websql

  • Tiene mucho parecido a la sintaxis tradicional de SQL que estamos acostumbrados.

  • Es relativamente nuevo, poca documentación en la red en comparación a SQLite

Script:

      <script type="text/javascript">

         var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
         var msg;

         db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
            msg = '<p>Log message created and row inserted.</p>';
            document.querySelector('#status').innerHTML =  msg;
         });

         db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
               var len = results.rows.length, i;
               msg = "<p>Found rows: " + len + "</p>";
               document.querySelector('#status').innerHTML +=  msg;

               for (i = 0; i < len; i++){
                  msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
                  document.querySelector('#status').innerHTML +=  msg;
               }
            }, null);
         });

      </script>

HTML:

<div id="status" name="status">Status Message</div>

Referencia del ejemplo mostrado: http://www.tutorialspoint.com/html5/html5_web_sql.htm

SQLite:

Tiene bastante soporte, desde su lanzamiento en el 2000, hay cientos de sitios que te dan soporte, ejemplos, documentación, etc, etc, etc. Lo encuentran en:

Android7 5
BlackBerry
Windows Phone 8
Google Chrome5
iOS5
Firefox OS
Maemo
MeeGo
Symbian OS5
webOS

Referencia: San Wikipedia https://es.wikipedia.org/wiki/SQLite

¿Hay alguna ventaja/inconveniente de usar una sobre la otra?

La principal ventaja es que al utilizar SQLite tienes la madurez necesaria de la experiencia global de desarrolladores que han realizado soluciones con dicha plataforma.

¿Existen problemas de integración con alguna de esas plataformas?

Sí, con WebSQL: El espacio límite de almacenamiento está definido por el navegador, http://www.html5rocks.com/en/tutorials/offline/quota-research/

Para aprender y manejar SQLite, te recomiendo visitar http://www.tutorialspoint.com/sqlite/index.htm

Con respecto a Apache Cordova

SQLite Plugin Tiene 3 variantes:

  • cordova-sqlite-storage - es la versión core que incluye la implementación de sqlite3. Soporta iOS, Android & Windows platforms.
  • cordova-sqlite-ext - versión extendida que incluye REGEXP, soportado en Android and iOS.
  • cordova-sqlite-evfree - similar cordova-sqlite-ext pero con mejor manejo de memoria. Disponible con licencia Comercial o GPL v3.

Mayor información en: https://cordova.apache.org/docs/en/latest/cordova/storage/storage.html#plugin-based-options-filesystem-api

Pequeño tutorial sobre un CRUD:

Creamos o abrimos un DB:

var myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db", location: 'default'});

myDB.transaction(function(transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [],
function(tx, result) {
    alert("Table created successfully");
},
function(error) {
alert("Error occurred while creating the table.");
    });
});

Insertando data:

var title="Fredy Guibert";
var desc="Full Stack Web Developer";
myDB.transaction(function(transaction) {
var executeQuery = "INSERT INTO phonegap_pro (title, desc) VALUES (?,?)";
transaction.executeSql(executeQuery, [title,desc]
, function(tx, result) {
    alert('Inserted');
},
function(error){
    alert('Error occurred');
});
});

Select

myDB.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) {
var len = results.rows.length, i;
$("#rowCount").append(len);
for (i = 0; i < len; i++){
$("#TableData").append("<tr><td>"+results.rows.item(i).id+"</td><td>"+results.rows.item(i).title+"</td><td>"+results.rows.item(i).desc+"</td></tr>");
}
}, null);
});

Update

$("#update").click(function(){
 var id=$("#id").text();
 var title=$("#title").val();
 var desc=$("#desc").val()
 myDB.transaction(function(transaction) {
 var executeQuery = "UPDATE phonegap_pro SET title=?, desc=? WHERE id=?";
 transaction.executeSql(executeQuery, [title,desc,id],
 //On Success
 function(tx, result) {alert('Updated successfully');},
 //On Error
 function(error){alert('Something went Wrong');});
 });
});

Delete

myDB.transaction(function(transaction) {
 var executeQuery = "DELETE FROM phonegap_pro where id=?";
 transaction.executeSql(executeQuery, [id],
 //On Success
 function(tx, result) {alert('Delete successfully');},
 //On Error
 function(error){alert('Something went Wrong');});
 });

Eliminar la tabla:

myDB.transaction(function(transaction) {
 var executeQuery = "DROP TABLE IF EXISTS phonegap_pro";
 transaction.executeSql(executeQuery, [],
 function(tx, result) {alert('Table deleted successfully.');},
 function(error){alert('Error occurred while droping the table.');}
 );
 });

Referencia: https://phonegappro.com/tutorials/phonegap-sqlite-tutorial-with-example-apache-cordova/

Si estás utilizando ionic, este tuto te va a gustar: https://www.thepolyglotdeveloper.com/2015/12/use-sqlite-in-ionic-2-instead-of-local-storage/ y su respectivo video explicando detalle a detalle: https://www.youtube.com/watch?v=F6TUtN0VYwY

9

localStorage: Apropiado para guardar información de configuración de la app, es decir todo lo que el usuario en la ventana de configuración, se puede usar.

Los datos se acceden como si fuesen una lista clave = valor.

WebSQL: me parece que está obsoleto, no todos los navegadores lo soportan de la misma forma, es lento y no puede guardarse demasiada información.

IndexedDB: en IOS no lo soporta

SQLite (via plugin) pues seria una alternativa si no existiera nada más, pero actualmente existen otros tipos de base de datos basados en objetos, mucho más optimizados en rendimiento.

Soporta SQL de lo más básico, casi todo lo que comporta, upgrades, actualizaciones, eliminación de contenido, añadir etc.. (cada programador se debe apañar con la sintaxis SQL)

Si el proyecto usará un sistema de datos complejos a la hora de mantener (actualizaciones, añadir nuevas funcionalidad, etc..) puede ser engorroso.

NO-SQL: Últimamente se han popularizado las base de datos NO-SQL cubriendo todos los aspectos de una app.

Por ejemplo REALM que es mucho más optimizado que sqlite.

Realm es un sistema de base de datos que usa objetos, son mucho más entendedoras, fáciles de usar, se puede realizar todo tipo de acciones:

  • Añadir datos
  • Modificar datos
  • Eliminar datos
  • Relaciones entre objetos (tablas)
  • Filtrado de datos
  • Sistema de upgrade de versionado.
  • Sistema de sincronización de datos servidor/cliente

Son extremadamente rápidas ya que parte de la información corre en memoria y solo se guardan a disco cuando es necesario.

Mirate Realm o Firebase

Documentación realm.io

Soporte para cordova: realm-js

9

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í

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

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');
});;
1
  • Que sucede con IOS 10? tiene soporte?
    – cignius
    Commented el 17 dic. 2016 a las 3:19
5

Hola en mi experiencia uso y re recomiendo WebSQL. Acá podes ver la compatibilidad.

http://mobilehtml5.org

Uso Cordova o Phonegap y la verdad que no he tenido mayores problemas. Tenés que saber que tenés un límite de 50 MB.

SQL con Javascript: Web SQL Database

Como supongo que muchos ya sabréis, una especificación de HTML5 es Web SQL Database para persirtir datos en una base de datos relacional embebidos en el navegador web(la otra alternativa es Web Storage, para persistir datos como clave valor). Esto puede tener muchas aplicaciones, en mi caso lo he utilizado para implementar el sistema de favoritos de DNDzgz.

Cuando pretendamos sacar partido de las nuevas características de HTML5 debemos tener en cuenta que cada navegador puede soportar sólo algunas especificaciones, no es un todo o nada, por lo que lo primero que deberemos hacer es comprobar que soporta la especificación que queremos usar, por ejemplo:

function supports_local_database() {
return !!window.openDatabase;
}

Si existe openDatabase, crearemos la conexión a la base de datos:

db = openDatabase('dndzgz', '1.0', 'DNDzgz', 65536);

Una vez abierta la conexión, podremos ejecutar cualquier tipo de query SQL(compatible con SQLite), dentro de una transacción. Por ejemplo crear una tabla:

db.transaction(
function(transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS favorites ' +
' (id INTEGER NOT NULL, ' +
' service VARCHAR(255) NOT NULL, ' +
' date DATE NOT NULL,' +
' name VARCHAR(255) NOT NULL, ' +
' latitude REAL NOT NULL, ' +
' longitude REAL NOT NULL, ' +
' PRIMARY KEY (id,service));'
);
}
);

Insertar datos:

db.transaction(
function(transaction) {
transaction.executeSql(
'INSERT INTO favorites (id, service, date, name, latitude, longitude) VALUES (?, ?, ?, ?, ?, ?);',
[id, service, new Date(), name, latitude, longitude],
callBack,
errorCallBack
);
}
);

Eliminar datos:

db.transaction(
function(transaction) {
transaction.executeSql('DELETE FROM favorites WHERE id=? AND service=?;',
[id,service], null, errorCallBack);
}
);

Y por supuesto mostrarlos:

db.readTransaction(
function(transaction) {
transaction.executeSql(
'Select * from favorites;', [],
function(transaction, result){
for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i); alert(row.name); alert(row.service); } }, errorCallBack ); } );

Como podéis ver, a executeSql se le pasa primero la query, seguidamente un array con los valores de los argumentos de la query, y finalmente una función de callback y otra de callback para el caso de que existan errores. Y existen dos tipos de transacciones: transaction y readTransaction, la primera es de lectura-escritura, mientras que la segunda es de sólo lectura.

En fin, supongo que a otros también os pasará lo mismo, resulta bastante raro estar tirando queries SQL desde javascript. Pero puede resultar útil para muchos casos, empezando por descargar de responsabilidades y carga al lado servidor.

fuente: danilat.com

Suerte!

4

Base de datos SQL Web.

Las tiendas de API Web SQL y consultas de datos utilizando SQL. Puede almacenar 50-200 MB de datos en base de datos SQL Web, el límite exacto de cuotas depende de la plataforma. Una vez que se alcanza el límite de la WebView pregunta al usuario para conceder el permiso para utilizar el espacio más local.

Desventajas o inconvenientes

Nota: Esta API no está soportada por todas las plataformas.

Cordova SQLite Plugin

Este plugin Cordova permite el acceso Cordova aplicación de la base de datos SQLite nativo subyacente, proporcionando una API idéntica a la API de SQL Web. No tiene límite de cuota y se puede sincronizar los datos con iCloud en iOS.

Para la mayoría de los casos no necesitará utilizar la API de almacenamiento Web y el plugin SQLite.

Nota: Para almacenar las imágenes a nivel local que no tienen que usar un plugin de archivo. Algunos desarrolladores utilizan el esquema de codificación Base64 para almacenar imágenes en SQLite. Sin embargo, para vídeo, audio y otros archivos de gran tamaño, codificación y decodificación consume una gran cantidad de tiempo y la memoria, por lo tanto se recomienda guardarlas en archivos y utilizar la URL de archivos para mostrarlos.

A pesar de que podría estar familiarizado con las API de almacenamiento web, que vale la pena volver a visitar.

¿Cómo es cómo agregar, borrar, actualizar y almacenamiento local claro:

if(localStorage != undefined)
{
 console.log("Local Storage is supported");

 //add
 localStorage.setItem("Website", "SitePoint");

//update or overwrite
localStorage.setItem("Website", "SitePoint.com");

//remove
localStorage.removeItem("Website");

//remove all
 localStorage.clear();
}
else
{
console.log("No support");
}

¿Cómo es cómo agregar, borrar, actualizar y almacenamiento de las sesiones clara:

if(sessionStorage != undefined)
{
console.log("session Storage is supported");

 //add
 sessionStorage.setItem("Website", "SitePoint");

//update or overwrite
sessionStorage.setItem("Website", "SitePoint.com");

//remove
  sessionStorage.removeItem("Website");

//remove all
sessionStorage.clear();
}
else
{
console.log("No support");
}

El Cordova SQLite Plugin

SQLite es un DBMS embebidos basados ​​en el lenguaje SQL. Una base de datos SQLite con API completa es proporcionada por iOS, Android y Windows Phone.

El plug-in SQLite Cordova proporciona una API simple para crear bases de datos y ejecutar consultas sobre SQLite. Este plugin expone una API similar a la API de SQL Web. Es necesario estar familiarizado con SQL (como MySQL) para escribir consultas.

Aquí es cómo crear una base de datos y ejecutar consultas SQL en la base de datos.

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

  // Cordova is ready
 function onDeviceReady()
 {
 var db = window.sqlitePlugin.openDatabase({name: "demo.db"});

db.transaction(function(tx) {

    //create table
    tx.executeSql("CREATE TABLE IF NOT EXISTS demo (id integer primary key, data text, data_num integer)", [], function(tx, res){

        //insert data
        tx.executeSql("INSERT INTO demo (id, data, data_num) VALUES (?,?,?)", [1, "test", 100], function(tx,res){

            //retrieve data
            tx.executeSql("SELECT * FROM demo WHERE id = ?", [1], function(tx, res){
                for(var iii = 0; iii < res.rows.length; iii++)
                {
                    alert(res.rows.item(iii).id);
                    alert(res.rows.item(iii).data);
                    alert(res.rows.item(iii).data_num);
                }
            })

        });

    });

}, function(err){

    //errors for all transactions are reported here
    alert("Error: " + err.message)

});
}

Aquí primero creamos la base de datos, a continuación, llamar al transaction método del objeto de base de datos con una devolución de llamada. Dentro de la devolución de llamada corremos las consultas SQL. Las consultas se ejecutan utilizando la executeSql función que devuelve la respuesta de forma asíncrona.

Si cualquiera de las consultas fallan, entonces la segunda devolución de llamada se pasa al transaction método se invoca. Devolución de llamada de la executeSql que no se disparará si falla la consulta.

Para eliminar una base de datos, utilice este código:

//delete database
 window.sqlitePlugin.deleteDatabase({name: "demo.db"}, function(){
alert("Successfully deleted database");
}, function(){
 alert("Error while delete database");
});

Cordova SQLite Plugin: Tiene muchas ventajas la mejor opción en lo personal.

Espero te ayude. Saludos.

2

Puedes usar NgData ORM para sqlite y websql. Yo lo uso en mis apps de IONIC y me va bien. Prueba y saca tus propias conclusiones.

https://travis-ci.org/lykmapipo/ngData.svg?branch=master

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.