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 .
Join Our Telegram Channel to Stay Updated
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment