Martin Kadlec blogging

Web SQL Database

Objects:

[object Database]
  version = 1.0
  changeVersion = function changeVersion() { [native code] }
  transaction = function transaction() { [native code] }
  readTransaction = function readTransaction() { [native code] }

[object SQLTransaction]
  prototype = [object Object]
  executeSql = function executeSql() { [native code] }

[object SQLResultSet]
  insertId
  rowsAffected
  rows

[object SQLResultSetRowList]
  {number 0-N} = [object Object] (rows);
  length = {COUNT OF ROWS}
  item = function item() { [native code] }

[object Object] (ROW)
  {some column like 'id', 'name' etc...} = {number|string|boolean}

[object SQLError]
  code = {ERROR NUMBER}
  message = {ERROR MESSAGE}
  UNKNOWN_ERR = 0
  DATABASE_ERR = 1
  VERSION_ERR = 2
  TOO_LARGE_ERR = 3
  QUOTA_ERR = 4
  SYNTAX_ERR = 5 and probably 8+ in Opera (It's because opera can recognize which syntax error appeared. For example 12 is for case when table is unknown. Numbers are from SQL Lite.)
  CONSTRAINT_ERR = 6
  TIMEOUT_ERR = 7

______________________________________________________________

var tableName = "myTable";
var processSelect = function(myTransaction, myResultSet){
    // myTransaction = [object SQLTransaction]
    // myResultSet = [object SQLResultSet]
   var myRows = myResultSet.rows;
    // myRows = [object SQLResultSetRowList]
   var row2 = myRows[2];
    // row2 = [object Object] (ROW)
   var row2columnA = row2.a;
}
var processError = function(myTransaction, myError){
    alerrt("ERROR code: "+myError.code+"

"+myError.message);
}
[object SQLTransaction].executeSql("SELECT * FROM ?", [tableName], processSelect, processError);

______________________________________________________________

EXAMPLE:

var db = openDatabase("dbOpera", "1.0", "opera", 1024*1024);
var transc = function(t){
t.executeSql("DROP TABLE IF EXISTS tbOpera");
t.executeSql("CREATE TABLE tbOpera (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT ,user VARCHAR(30) NOT NULL ,UNIQUE (user))");
for (var i=1;i<=10;i++){
var newUser = "test"+i;
t.executeSql("INSERT INTO tbOpera (user) VALUES (?)", [newUser]);
}
t.executeSql("SELECT * FROM tbOpera", [], sqlSelect, sqlError);
}
var sqlSelect = function(t,r){
var rows = r.rows;
for (var i=0,j=rows.length;i<j;i++){
document.write("ID: "+rows[i].id+" USER: "+rows[i].user+"<br>");
}
}
var sqlError = function(t,e){
alert("ERROR "+e.code+": "+e.message);
}
db.transaction(transc);

Comments
Please login to post comments.
Avatar
07.08.2010 15:08
Web SQL Database is stored on local computer so everything should be accessible in off-line mode.

I'm quite sure that there is no way of uploading files directly into WebSQL. But there is definitely at least one way how to store images into WebSQL. Thanks to Canvas API we can create something like "png image string" from any image type that canvas supports for importing into canvas element. Then you can use this string directly in "src" attribute of image element.

If you have more question you can PM me and if you want I should be able to send you an example.
Avatar
05.08.2010 17:08
Thanks for this great article!

Is there a plan to make html5+javascript more binary friendly? I primary think of storing images in the database and display them by javascript. Or uploading some kind of file directly into database.
Will that be possible in offline-mode?

Or will offline capability will only work as long as the user just want to manipulate simple text?

Best regards,
Ben
Avatar
07.04.2010 21:04
It's not temporary storage. Everything should be there after refresh. Can you send me your code? Then I might help you a bit more =)
Avatar
07.04.2010 20:04
I've created the table and inserted the rows, after that I change the code to just get the rows (no drop table, no creation, no insert...) but it fails when I reload the page. So it's only temporary storage??? or I have to add extra code??