Markdidj, you can run SQLite on the browser using the depreciated Web Database (http://www.w3.org/TR/webdatabase/) and use Javascript to access it (Webkit browsers only). This is similar to what Phonegap uses.
Here is a wrapper for web database and for the OP's example:
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<p id="title"></p>
<p id="name"></p>
<button id="populateDiv">Go</div>
</div>
<script>
var DB = function() {
var _db = null;
return {
init: function(dbname) {
_db = openDatabase(dbname, '1.0', '', 5 * 1024 * 1024);
},
query: function(sql, arr) {
_db.transaction(function(tx){
tx.executeSql(
sql,
arr,
function (tx, rs) {
if (!rs.rowsAffected) {
console.log('No rows affected on query: ' + sql);
return false;
}
},
function(tx, error) {
console.log(error.message + ' on query: ' + sql);
}
);
});
},
resultSet: function(sql, arr, callback) {
_db.readTransaction(function(tx){
tx.executeSql(
sql,
arr,
function(tx,rs) {
var output = [];
for(i = 0; i < rs.rows.length; i++) {
output.push(rs.rows.item(i));
}
if ( typeof(callback) == 'function' ) {
callback(output);
}
},
function(tx, error) {
console.log(error.message);
}
)
});
}
}
};
var db = new DB,
btn = document.getElementById('populateDiv');
db.init('app');
db.query('DROP TABLE IF EXISTS DEMO');
db.query('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
db.query('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
db.query('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
btn.onclick = function() {
var divTitle = document.getElementById('title'),
divName = document.getElementById('name');
db.resultSet(
'SELECT * FROM DEMO LIMIT 1', [],
function(rs) {
rs.forEach(function(el, i) {
divTitle.innerHTML = rs[i].id;
divName.innerHTML = rs[i].data;
});
}
);
}
</script>
</body>
</html>
Reply With Quote
Originally Posted by Markdidj
Bookmarks