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. 读书笔记（javascript 高级程序设计）

    一. 数据类型: 1. undefined: 未声明和未初始化的变量,typeof 操作符返回的结果都是 undefined:(建议未初始化的变量进行显式赋值,这样当 typeof 返回 undefi ...

  2. 图论&双连通分量&强联通分量&2-SAT

    图论入门费: 数据小,大胆的写 https://vjudge.net/problem/UVA-10047 入门费 https://vjudge.net/problem/UVA-11624 思维,建图异 ...

  3. 【BZOJ 3669】 3669: [Noi2014]魔法森林 （动态spfa）

    3669: [Noi2014]魔法森林 Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N ...

  4. Linux-Oracle 安装配置步骤

    一.打开 VMware 安装 VMware 解压 ORACLER11.2_redhat.rar 到 D:\...\machine\oracle-linux 打开 VMware, 选择 打开虚拟机 找到 ...

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

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

  6. HDU 5967 小R与手机（动态树）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5967 [题目大意] 给出一张图,每个点仅连一条有向边,或者不连, 要求查询在可更改有向边的情况每个 ...

  7. 检测是否为n的因子 Exercise07_06

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:检测是否为n的因子 * */ public class Exercise07_06 { public static void ...

  8. Java学习笔记（15）

    iterator方法 迭代器的作用:就是用于抓取集合中的元素 注:迭代器返回的一个接口类型的实现类,是一种多态的用法,而不是接口在调用方法 public class Demo2 { public st ...

  9. (转)JS中的对象

    1.对象 要有对象, 就先要有创建对象的方法. 在C++/Java等语言, 这个方法就是实例化XXX类的一个实例xxx.而在JavaScript的世界里实际没有类的东西, 当然仍然可以用"类 ...

  10. java ArrayList源码分析（转载）

    1.ArrayList是一个相对来说比较简单的数据结构,最重要的一点就是它的自动扩容,可以认为就是我们常说的“动态数组”. 来看一段简单的代码: 12345 ArrayList<String&g ...