HTML5 enables you to store data in database on a client's machine using a real SQL database. Now create a Web page named databasestorage.html to implement database storage.
//// implement the databasestorgae on a system////
<!doctype html>
<head>
<title>Database storage Example</title>
<style>
#websqldb-example.record-list li:nth-child(odd){background-color:lightgreen;
}
#websqldb-example.record-list li:nth-child(even){background-color:pink;}
#websqldb-example.record-list li{
padding-left:5px;
}
#db-results{
max-height:150px;
overflow:auto;
text-align:left;
}
#websqldb-example.error{
color:red;
}
</style>
</head>
<body>
<div class="slide" id="web-sql-db">
<header><h1>Web SQL Database</h1></header>
<section>
<div class="center" id="websqldb-example">
<button onclick="webSqlSample.createTable()">create table</button><br>
<input typle="text" id="todoitem">
<button onclick="webSqlSample.newRecord()">Add new item to the table</button><br>
<button onclick="webSqlSample.dropTable()">Drop table </button>
<p>The generated database is given as follows:</p>
<ul class="record-list" id="db-results"></ul>
<div id="db-log"></div>
</div>
<script defer>
var webSqlSample=(function(){
var db;
var log=dacument.getElementById('db-log');
if(window.openDatabase){
db=openDatabase("DBTest","1.0","HTML5 Database API example",200000);
showrecords();
}
document.getElementById('db-results').addEventListener('click',function(e){e.preventDefault();},false);
function onError(tx, error){
log.innerHTML='<p class="error">Error:'+error.message+'</p>';
}
function showRecords(){
document.getElementById(''db-results).innerHTML='';
db.transaction(function(tx){
tx.executeSql("SELECT*FROM Test",[],function(tx,results){
for(var i=0,item=null;i<result.rows.length;i++){
item=result.rows.item(i);
document.getElementById('db-results').innerHTML+=
'<li><span contentEditable="true"
onkeyup="webSqlSample.updateRecord('+item['id']+',this)">'+item['text']+'</span><a href="#" onclick="webSqlSample.deletRecord('+item['id']+')">[Delete]</a></li>';
}
});
});
}
function createTable(){
db.transaction(function(tx){
tx.executeSql("CREATE TABLE Test(id REAL UNIQUE,text TEXT)",[],
function(tx){log.innerHTML='<p>"Test"table created!</p>'},onError);
});
}
function newRecord(){
var num=Math.round(Math.random()*10000);//random data
db.transaction(function(tx){
tx.executeSql("INPUT INTO Test(id,text) VALUES(?,?)",[num,document.querySelector('#todoitem').value],
function(tx,result){
log.innerHTML='';
showRecords();
},
onError);
});
}
function updateRecord(id,textEl){
db.transaction(function(tx){
tx.executeSql(UPDATE Test SET text=? WHERE id=?",
[textEl.innerHTML,id],null,onError);
});
}
function deleteRecord(id){
db.transaction(function(tx){
tx.executeSql("DELETE FROM Test WHERE id=?",[id],
function(tx,result){showRecords()},
onError);
});
}
function dropTable(){
db.transaction(function(tx){
tx.executeSql("DROP TABLE Test",[],
function(tx){
showRecords();
log.innerHTML='<p>Table deleted! </p>'},
onError);
});
}
return{
newRecord:newRecord,
createTable:createTable,
updateRecord:updateRecord,
deleteRecord:deleteRecord,
dropTable:dropTable
}
})();
</script>
</section>
</div>
</body>
</html>
The createTable(), newRecord(), deleteRecord(), updateRecord(), showRecords(),
and dropTable() functions are created using JaveScript. These functions are using the transaction() and executeSql() function to insert and access the data stored in a database.
//// implement the databasestorgae on a system////
<!doctype html>
<head>
<title>Database storage Example</title>
<style>
#websqldb-example.record-list li:nth-child(odd){background-color:lightgreen;
}
#websqldb-example.record-list li:nth-child(even){background-color:pink;}
#websqldb-example.record-list li{
padding-left:5px;
}
#db-results{
max-height:150px;
overflow:auto;
text-align:left;
}
#websqldb-example.error{
color:red;
}
</style>
</head>
<body>
<div class="slide" id="web-sql-db">
<header><h1>Web SQL Database</h1></header>
<section>
<div class="center" id="websqldb-example">
<button onclick="webSqlSample.createTable()">create table</button><br>
<input typle="text" id="todoitem">
<button onclick="webSqlSample.newRecord()">Add new item to the table</button><br>
<button onclick="webSqlSample.dropTable()">Drop table </button>
<p>The generated database is given as follows:</p>
<ul class="record-list" id="db-results"></ul>
<div id="db-log"></div>
</div>
<script defer>
var webSqlSample=(function(){
var db;
var log=dacument.getElementById('db-log');
if(window.openDatabase){
db=openDatabase("DBTest","1.0","HTML5 Database API example",200000);
showrecords();
}
document.getElementById('db-results').addEventListener('click',function(e){e.preventDefault();},false);
function onError(tx, error){
log.innerHTML='<p class="error">Error:'+error.message+'</p>';
}
function showRecords(){
document.getElementById(''db-results).innerHTML='';
db.transaction(function(tx){
tx.executeSql("SELECT*FROM Test",[],function(tx,results){
for(var i=0,item=null;i<result.rows.length;i++){
item=result.rows.item(i);
document.getElementById('db-results').innerHTML+=
'<li><span contentEditable="true"
onkeyup="webSqlSample.updateRecord('+item['id']+',this)">'+item['text']+'</span><a href="#" onclick="webSqlSample.deletRecord('+item['id']+')">[Delete]</a></li>';
}
});
});
}
function createTable(){
db.transaction(function(tx){
tx.executeSql("CREATE TABLE Test(id REAL UNIQUE,text TEXT)",[],
function(tx){log.innerHTML='<p>"Test"table created!</p>'},onError);
});
}
function newRecord(){
var num=Math.round(Math.random()*10000);//random data
db.transaction(function(tx){
tx.executeSql("INPUT INTO Test(id,text) VALUES(?,?)",[num,document.querySelector('#todoitem').value],
function(tx,result){
log.innerHTML='';
showRecords();
},
onError);
});
}
function updateRecord(id,textEl){
db.transaction(function(tx){
tx.executeSql(UPDATE Test SET text=? WHERE id=?",
[textEl.innerHTML,id],null,onError);
});
}
function deleteRecord(id){
db.transaction(function(tx){
tx.executeSql("DELETE FROM Test WHERE id=?",[id],
function(tx,result){showRecords()},
onError);
});
}
function dropTable(){
db.transaction(function(tx){
tx.executeSql("DROP TABLE Test",[],
function(tx){
showRecords();
log.innerHTML='<p>Table deleted! </p>'},
onError);
});
}
return{
newRecord:newRecord,
createTable:createTable,
updateRecord:updateRecord,
deleteRecord:deleteRecord,
dropTable:dropTable
}
})();
</script>
</section>
</div>
</body>
</html>
The createTable(), newRecord(), deleteRecord(), updateRecord(), showRecords(),
and dropTable() functions are created using JaveScript. These functions are using the transaction() and executeSql() function to insert and access the data stored in a database.
No comments:
Post a Comment