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. 2017腾讯OMG实习生面试总结

    2017腾讯OMG实习生面试总结 一面 一面有两个面试官,轮着来的,一共是一个半小时,中间等了10分钟左右.结合简历问了问项目,也考察了基础,手写了两道简单的算法题.问题包括: 第一个面试官 1.自我 ...

  2. angularjs学习笔记1-angular总体简介及其特点

    以前开发(web或者移动端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用.而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨 ...

  3. 【Miller-Rabin算法】

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

  4. 20162307 实验四 Android程序设计

    实验四 <Android程序设计> 北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级:1623 姓名:张韵琪 学号:20162307 指导教师:娄佳鹏老师.王 ...

  5. Linux下KVM的图形界面管理工具（virt-manager）（桌面版）

    背景: virt-manager是用于管理KVM虚拟环境的主要工具,virt-manager默认设置下需要使用root用户才能够使用该工具.当你想在KVM hypervisor服务器上托管虚拟机,由最 ...

  6. javascript实现原生ajax

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  7. Linux进程(作业)的查看和杀死 牛

    http://www.cnblogs.com/geaozhang/p/6910151.html

  8. Word中正文两栏表格通栏排版

    如图所示,需要在插入表格的地方插入连续分节符,这是word2013,在插入里面只有分页符 如果直接插入的话表格上下的分节符会分栏,那样表格会歪曲, 可以上面一段和下面一段设置成通栏,然后中间插入表格, ...

  9. 如何优雅的编写Objective-C语言？

    ① 减少缩写 命名缩写只用于通用专业术语,如URL,不可自创命名缩写,如Ctr.Msg.命名宁可长一些,也不要难于理解. ② 过程化 动作发生之前用Will,发生之后用Did,询问是否发生用Shoul ...

  10. Sata win7 热插拔（AHCI）

    主板支持AHCI,把sata模式改成AHCI,在bios打开SATA热插拔开关 开启AHCI,需要修改注册表:HKEY_LOCAL_MACHINE\System\CurrentControlSet\S ...