HTML5 Web Sql Tutorial


HTML5 Web Sql Tutorial



What is HTML5 Web Sql?

Html5 gives many new thing to us. One Of this is Web sql with new functionality to store row and Columns sql data locally on client side machine (browser, web view app,cordova based apps) with the help of local storage we can store value in browser by using queries .
Web Sql use Sqlite for data Storage.
Note :- WebSql is supported only in some browser like chrome,Android ,etc(firefox not supporting websql).
Websql is divided into Three Steps.
1.Open Database
2.Execute Transaction
3.Execute Queries
Step 1. Create Or Open Web Sql Database
var database=openDatabase(‘mydatabase’,1.0,’testing’,1024*1024);
1. First parameter is Database name
2.Second Parameter is Database Version
3.Database Description
4.Size of databse (1024*1024) = 1 Mb (size of database)

Step 2.Executing Queries like Creating Table,Insert,Select,etc. All Our Queries Can Be done inside transaction.
var a=2;
var user=”john2”;
database.transaction(function(tx)
{
tx.executeSql(‘CREATE TABLE IF NOT EXISTS demo (id unique, username
varchar)’,[],success,error);
});
//here we give three parameters which is first table creating
//third callback function when table created
//fourth is error function when web sql generate error
//insert data in table
function error(error)
{
console.log(error)
}
function success()
{
database.transaction(function(tx)
{
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (1, "John"));
//for dynamic data
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (?,?)’,[a,user],function(tx,result) { console.log(‘succes’); } ,function(tx,error){ console.log(‘failed’); });
//here we use four parameter
//first is for binding the value in table
//second is giving to insert into table
//third is for success function when data insert
//fourth is for error generating object
});
}
//retrieve data from table
database.transaction(function(tx)
{
tx.executeSql('SELECT * FROM demo ', [], function (tx, results)
{
var len = results.rows.length;
for(var i=0;i<len;i++)
{
var id=results.rows.item(i).id;
var user=results.rows.item(i).user;
document.write(“id : “+id+” User : “+user+” “);
}
},function(tx,error){
});
//here first parameter is for sql query
//second is data of array
//third is success function
//fourth is error
});

Code 2.(Complete Code Example)
<html>
<head>
<script>
var database=openDatabase(‘mydatabase’,1.0,’testing’,1024*1024);
var a=2;
var user=”john2”;
database.transaction(function(tx)
{
tx.executeSql(‘CREATE TABLE IF NOT EXISTS demo (id unique, username
varchar)’,success,error);
});
//here we give three parameters which is first table creating
//second callback function when table created
//third is error function when web sql generate error
//insert data in table
function success()
{
database.transaction(function(tx)
{
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (1, "John"));
//for dynamic data
tx.executeSql(‘INSERT INTO demo (id, username) VALUES (?,?)’,[a,user],function(tx,result) { console.log(‘succes’); } ,function(tx,error){ console.log(‘failed’); });
//here we use four parameter
//first is for binding the value in table
//second is giving to insert into table
//third is for success function when data insert
//fourth is for error generating object
});
}
//retrieve data from table
database.transaction(function(tx)
{
tx.executeSql('SELECT * FROM demo ', [], function (tx, results)
{
var len = results.rows.length;
for(var i=0;i<len;i++)
{
var id=results.rows.item(i).id;
var user=results.rows.item(i).username;
document.write(“id : “+id+” User : “+user+” “);
}
},function(tx,error){
});
//here first parameter is for sql query
//second is data of array
//third is success function
//fourth is error
});
</script>
</head>
<body>
<h1>Web Sql Tutorial</h1>
</body>
</html>
When We Reload Page Again We Get The Web Sql Value Like This.


Note : - Generally We Use Web Sql in Cordova based application where we store information locally in app when user come again and see local data of offline app.


Thank you .
Previous Post
Next Post

post written by:

0 comments: