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