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. 可持久化线段树（cf1080F）

    大佬博客 https://www.cnblogs.com/zinthos/p/3899565.html 题目:https://codeforces.com/problemset/problem/108 ...

  2. Codeforces Round #274 (Div. 2) Riding in a Lift（DP 前缀和）

    Riding in a Lift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  3. Xamarin.Forms教程下载安装JDK配置环境变量

    Xamarin.Forms教程下载安装JDK配置环境变量 Xamarin.Form环境配置下载安装JDK JDK是编程Java程序必须的软件.也许有人会问我们用的C#为什么还有Java呢?这是因为我们 ...

  4. python基础之生成器，三元表达式，列表生产式

    生成器 1.什么是生成器? 在函数内但凡出现yield关键字,再调用函数就不会执行函数体代码,会返回一个值,该值称为生成器. 生成器的本质就是迭代器. 2.为什么要用生成器? 生成器是一种自定义迭代器 ...

  5. 数据结构--汉诺塔--借助栈实现非递归---Java

    /*汉诺塔非递归实现--利用栈 * 1.创建一个栈,栈中每个元素包含的信息:盘子编号,3个塔座的变量 * 2.先进栈,在利用循环判断是否栈空, * 3.非空情况下,出栈,检查是否只有一个盘子--直接移 ...

  6. C#中的as（转）

    as:用于检查在兼容的引用类型之间执行某些类型的转换.    Employee myEmployee = myObject as Employee;    if (myEmployee != null ...

  7. json字符串生成C#实体类的工具

    转载:http://www.cnblogs.com/finesite/archive/2011/07/31/2122984.html json作为互联网上轻量便捷的数据传输格式,越来越受到重视.但在服 ...

  8. Mysql客户端下载地址

    官网:http://dev.mysql.com/downloads/mysql/   上述千万不要下载免安装版本. 千万记住一定要下载MSI安装版本.

  9. SAP MM 模块常用的数据表

    SAP MM模块常用数据表: Table Table Class Application Class Data Class Description EBAN TRANSP  ME Transactio ...

  10. JavaScript 开发的45个技巧2

    http://mp.weixin.qq.com/s?src=3&timestamp=1474692926&ver=1&signature=agI3W5rKmVC6GgbdTXh ...