當前位置：首頁 > 运维知识 > 数据库 >内容正文

数据库

webSQL 实现即时通讯

發布時間：2025/4/16 数据库 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 webSQL 实现即时通讯小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

websql存儲方式一共有以下幾個方法

openDatabase:這個方法使用現有的數據庫或新建數據庫來創建數據庫對象。

transaction：這個方法允許我們執行事務處理;

executeSql:這個方法用于執行sql語句;

var db = openDatabase(name,version,displayName,estimateSize,creationCallback);

name:數據庫的名字;

version:數據庫的版本號;

displayName:數據庫的描述;

estimateSize:數據庫保存數據的大小;

createCallback:回調函數：

2. 調用transaction來執行sql語句

transaction(function(tx){})

tx:回調函數所接收的參數，此參數為transaction對象的引用。

3. 調用executeSql 方法來表示處理事務

transaction.executeSql(sql,[],dataHandler,errorHandler);

sql:要執行的sql語句;

[ ]:sql語句中的占位符“？”所對應的參數。

dataHandler：執行sql語句成功時調用的回調函數：

errorHandler:執行sql語句失敗時調用的回調函數。

先貼代碼

<!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">//初始化數據庫function initDatabase(){var db =getCurrentDB();if(!db){alert('您的瀏覽器不支持HTML本地數據庫');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){});})}//創建數據庫function getCurrentDB(){var db = openDatabase('data.db','1.0','demo data',1024*1024);return db;}$(function(){//初始化數據庫initDatabase();$("#save").on('click',function(){var txtName = $('#userName').val();var txtTitle= $('#userTitle').val();var txtWords = $('#userContent').val();//執行sql腳本來插入數據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);})})})//將數據展示到表格中$("#showContent").on('click',function(){showAllTheData();});//顯示所有數據庫中的數據到頁面中function showAllTheData(){$('#showTable').empty();var db =getCurrentDB();db.transaction(function(trans){trans.executeSql('select * from Demo',[],function(ts,data){if(data){//循環記錄中的數據for(var i=0;i<data.rows.length;i++){//獲取每一行數據的json對象（鍵值對組成),將數據拼接成表格中的一行行數據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>標題:</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>

總結

以上是生活随笔為你收集整理的webSQL 实现即时通讯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vijos P1756 数字反转【进制】
下一篇：移动web开发之像素和DPR