webSQL 实现即时通讯
websql存儲(chǔ)方式一共有以下幾個(gè)方法
openDatabase:這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫(kù)或新建數(shù)據(jù)庫(kù)來(lái)創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象。
transaction：這個(gè)方法允許我們執(zhí)行事務(wù)處理;
executeSql:這個(gè)方法用于執(zhí)行sql語(yǔ)句;
1.
var db = openDatabase(name,version,displayName,estimateSize,creationCallback);name:數(shù)據(jù)庫(kù)的名字;
version:數(shù)據(jù)庫(kù)的版本號(hào);
displayName:數(shù)據(jù)庫(kù)的描述;
estimateSize:數(shù)據(jù)庫(kù)保存數(shù)據(jù)的大小;
createCallback:回調(diào)函數(shù)：
2. 調(diào)用transaction來(lái)執(zhí)行sql語(yǔ)句
transaction(function(tx){})tx:回調(diào)函數(shù)所接收的參數(shù)，此參數(shù)為transaction對(duì)象的引用。
3. 調(diào)用executeSql 方法來(lái)表示處理事務(wù)
transaction.executeSql(sql,[],dataHandler,errorHandler);sql:要執(zhí)行的sql語(yǔ)句;
[ ]:sql語(yǔ)句中的占位符“？”所對(duì)應(yīng)的參數(shù)。
dataHandler：執(zhí)行sql語(yǔ)句成功時(shí)調(diào)用的回調(diào)函數(shù)：
errorHandler:執(zhí)行sql語(yǔ)句失敗時(shí)調(diào)用的回調(diào)函數(shù)。
?
先貼代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>webSQL</title><script src="jquery.min.js" type="text/javascript"></script><script type="text/javascript">//初始化數(shù)據(jù)庫(kù)function initDatabase(){var db =getCurrentDB();if(!db){alert('您的瀏覽器不支持HTML本地?cái)?shù)據(jù)庫(kù)');return ;}db.transaction(function(trans){trans.executeSql('create table if not exists Demo(uName text null,title text null,words text null)',[],function(trans,result){},function(trans,message){});})}//創(chuàng)建數(shù)據(jù)庫(kù)function getCurrentDB(){var db = openDatabase('data.db','1.0','demo data',1024*1024);return db;}$(function(){//初始化數(shù)據(jù)庫(kù)initDatabase();$("#save").on('click',function(){var txtName = $('#userName').val();var txtTitle= $('#userTitle').val();var txtWords = $('#userContent').val();//執(zhí)行sql腳本來(lái)插入數(shù)據(jù)var db = getCurrentDB();db.transaction(function(trans){trans.executeSql('insert into Demo(uName,title,words)values(?,?,?)',[txtName,txtTitle,txtWords],function(ts,data){},function(ts,message){alert(message);})})})//將數(shù)據(jù)展示到表格中$("#showContent").on('click',function(){showAllTheData();});//顯示所有數(shù)據(jù)庫(kù)中的數(shù)據(jù)到頁(yè)面中function showAllTheData(){$('#showTable').empty();var db =getCurrentDB();db.transaction(function(trans){trans.executeSql('select * from Demo',[],function(ts,data){if(data){//循環(huán)記錄中的數(shù)據(jù)for(var i=0;i<data.rows.length;i++){//獲取每一行數(shù)據(jù)的json對(duì)象（鍵值對(duì)組成),將數(shù)據(jù)拼接成表格中的一行行數(shù)據(jù)appendDataToTable(data.rows.item(i));}}},function(ts,message){alert(message);})})}function appendDataToTable(data){var txtName =data.uName;var txtTitle =data.title;var txtWords =data.words;var strHTML ='';strHTML+='<tr>';strHTML += "<td>"+txtName+"</td>";strHTML += "<td>"+txtTitle+"</td>";strHTML += "<td>"+txtWords+"</td>";strHTML+='</tr>';$("#showTable").append(strHTML);}})</script> </head> <body> <table><tr><td>用戶名:</td><td><input type="text" id="userName"/></td></tr><tr><td>標(biāo)題:</td><td><input type="text" id="userTitle"/></td></tr><tr><td>留言:</td><td><input type="text" id="userContent"/></td></tr> </table> <input type="button" id="save" value="保存" /> <input type="button" id="showContent" value="展示你的信息"/> <table id ='showTable'></table> </body> </html>.
總結(jié)
以上是生活随笔為你收集整理的webSQL 实现即时通讯的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Vijos P1756 数字反转【进制】
- 下一篇： Oracle获取最近执行的SQL语句