websql存储方式一共有以下几个方法

openDatabase:这个方法使用现有的数据库或新建数据库来创建数据库对象。

transaction：这个方法允许我们执行事务处理;

executeSql:这个方法用于执行sql语句;

1.

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 实现即时通讯的更多相关文章

  1. 利用WCF双工模式实现即时通讯

    概述 WCF陆陆续续也用过多次,但每次都是浅尝辄止,以将够解决问题为王道,这几天稍闲,特寻了些资料看,昨晚尝试使用WCF的双工模式实现了一个简单的即时通讯程序,通过服务端转发实现客户端之间的通讯.这只 ...

  2. android环境下的即时通讯

    首先了解一下即时通信的概念.通过消息通道 传输消息对象,一个账号发往另外一账号,只要账号在线,可以即时获取到消息,这就是最简单的即使通讯.消息通道可由TCP/IP UDP实现.通俗讲就是把一个人要发送 ...

  3. 【原创】轻量级即时通讯技术MobileIMSDK：Android客户端开发指南

    申明:MobileIMSDK 目前为个人维护的原创开源工程,现陆续整理了一些资料,希望对需要的人有用.如需与作者交流,见文章底签名处,互相学习. MobileIMSDK开源工程的代码托管地址请进入 G ...

  4. 【原创】轻量级移动设备即时通讯技术MobileIMSDK的常见问题解答

    申明:MobileIMSDK 目前为个人原创开源工程且已发布,现整理了一些有关MobileIMSDK的常见的问题,希望对需要的人有用,谢谢.如需与作者交流,见文章底部个人签名处,互相学习. Mobil ...

  5. 【原创】轻量级移动端即时通讯技术 MobileIMSDK 发布了

    申明:MobileIMSDK目前为个人原创开源工程,投入了大量的时间和精力,希望对需要的人有所帮助.如需与作者交流,见文章底部个人签名处,互相学习.Q群:215891622,欢迎共同志趣者学习和交流. ...

  6. ActiveMQ 即时通讯服务 浅析

      一. 概述与介绍 ActiveMQ 是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provi ...

  7. APP邂逅即时通讯云，让你的手机APP聊起来

     #推荐活动# #线下沙龙# 明天下午在IC咖啡 —— <APP邂逅即时通讯云,让你的手机APP聊起来>, http://url.cn/Y8sYo5 

  8. 岁末年初3Q大战惊现高潮，360震撼推出Android "3Q" IM即时通讯

    岁末年初3Q大战惊现高潮,360震撼推出Android "3Q" IM即时通讯 看过了QQ和360斗争的开端高潮,当然现在还不能说这场斗争已经结束,在我看来这次的事件未尝不是一个适 ...

  9. Web端即时通讯技术盘点：短轮询、Comet、Websocket、SSE

    1. 前言 Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Serve ...

随机推荐

  1. python excellent code link

    1. Howdoi Howdoi is a code search tool, written in Python. 2. Flask Flask is a microframework for Py ...

  2. 洛谷——P2381 圆圆舞蹈

    P2381 圆圆舞蹈 题目描述 熊大妈的乃修在时针的带领下,围成了一个圆圈舞蹈,由于没有严格的教育,奶牛们之间的间隔不一致. 奶牛想知道两只最远的奶牛到底隔了多远.奶牛A到B的距离为A顺时针走和逆时针 ...

  3. logstash的grok正则匹配规则文件

    文件路径:logstash/vendor/bundle/jruby/1.9/gems/logstash-patterns-core-4.1.0/patterns/grok-patterns 在线调试g ...

  4. RabbitMQ (十一) 消息确认机制 - 消费者确认

    由于生产者和消费者不直接通信,生产者只负责把消息发送到队列,消费者只负责从队列获取消息(不管是push还是pull). 消息被"消费"后,是需要从队列中删除的.那怎么确认消息被&q ...

  5. hdu1006 Tick and Tick （数学题 借鉴了大神的博客）

    先缩短一半的时间:早上的12个小时和下午的12小时对时钟是一样的,因为时钟12小时与0小时的三针位置相同.接着就是了解到每次所有的针从有重合到再次有重合至多有一段连续的段符合三针分离度大于n.所以只要 ...

  6. 【BZOJ 4103】【THUSC 2015】异或运算

    http://www.lydsy.com/JudgeOnline/problem.php?id=4103 对长的那一维建可持久化trie树(主席树?) 最主要的思路是对短的那一维每一位暴力,每一位都记 ...

  7. luogu P2485 [SDOI2011]计算器

    题目描述 你被要求设计一个计算器完成以下三项任务: 1.给定y.z.p,计算y^z mod p 的值: 2.给定y.z.p,计算满足xy ≡z(mod p)的最小非负整数x: 3.给定y.z.p,计算 ...

  8. HDU 4388 Stone Game II 博弈论 找规律

    http://acm.hdu.edu.cn/showproblem.php?pid=4388 http://blog.csdn.net/y1196645376/article/details/5214 ...

  9. [LOJ6179]Pyh的求和

    首先有一个等式是$\varphi(ab)=\frac{\varphi(a)\varphi(b)d}{\varphi(d)}$,其中$d=(a,b)$,这个比较好证,直接按展开式计算可得$\varphi ...

  10. 【构造】Gym - 100781B - Bell Ringing

    根据n-1推n的情况,让n从每一个的最右走到最左,再从下一个最左走到最右,如此往复即可. #include<cstdio> using namespace std; int n,a[500 ...