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. ExtJs之组件(window)

    Ext.create('Ext.window.Window',{    title:'',    width:400,    height:300,    constrain:true,//限制窗口不 ...

  2. Java使用Redis初探

    Redis的相关概念不做介绍了,大家也可以先了解下Memcached,然后比较下二者的区别,就会有个整体的印象. 服务器端通常选择Linux , Redis对于linux是官方支持的,使用资料很多,需 ...

  3. 洛谷—— P1598 垂直柱状图

    P1598 垂直柱状图 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...

  4. 【POJ 3784】 Running Median （对顶堆）

    Running Median Description For this problem, you will write a program that reads in a sequence of 32 ...

  5. 初见Python<5>:条件、循环和其他语句

    1.使用逗号输出 使用逗号隔开,可以打印多个表达式.打印后,各项之间自动以一个空格隔开. 也可以同时输出文本和变量值. 可以和字符串连接符“+”一起使用.   2.从模块中导入函数 从模块导入函数的方 ...

  6. HDOJ(HDU) 3949 XOR

     Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submissio ...

  7. [Codeforces-div.1 494C] Helping People

    [Codeforces-div.1 494C] Helping People 试题分析 不难注意到题目所给的性质是一棵树,所以肯定是树形dp. 那么期望没有办法合并,我们还有一种最笨的方法就是求出概率 ...

  8. 【Miller-Rabin算法】

    存个板子,应该是对的吧……没太试 http://www.cnblogs.com/Norlan/p/5350243.html Matrix67写的 根据wiki,取前9个素数当base的时候,long ...

  9. 【平衡树】【pb_ds】 bzoj1861 [Zjoi2006]Book 书架

    需要用数组记录编号为i的书的位置,和位置i处的书的编号. Code: #include<cstdio> #include<ext/pb_ds/assoc_container.hpp& ...

  10. 【FFT（母函数）+容斥】BZOJ3771-Triple

    [题目大意] 给出 n个物品,价值为别为Xi且各不相同,现在可以取1个.2个或3个,问每种价值和有几种情况? *顺序不同算一种 [思路] 显然是个母函数,A表示每种物品取一个的情况,B表示每种物品取二 ...