<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="jquery.1.4.2.min.js"></script>
    <script type="text/javascript">
        //创建本地数据库
        var db=openDatabase("myDB","1.0","test db",2014*10); //创建数据库对象；  数据库名称：myDB， 版本：1.0， 数据库的描述：test db，数据库的大小：2014*10
        function Add(){
            db.transaction(function(fx){
                fx.executeSql("create table if not exists UserInfor(UserName TEXT,Pwd TEXT)",[]); //创建一个表，传参（传值），回调函数（执行成功后，可不写），回调函数（执行失败后，可不写）
                var username=$("#txtAUserName").val();
                var pwd=$("#txtPwd").val();
        // 添加
                if(username=="" || pwd==""){
                    alert("不能为空")
                }else{
                    fx.executeSql("insert into UserInfor values(?,?)",[username,pwd],function(){
                        alert("添加成功")
                    });
                }

            });
        }

        // 查询
        function Sel(){
            var sql="select * from UserInfor where 1=1"; //加where 1=1的目的，加上的话，不管下面if成不成立，这条执行语句都成立
            var username=$("#txtSUserName").val();
            if(username!=""){
                sql += " and UserName='" + username +"'";   //例：username=aaaa   select * from UserInfor where 1=1 and UserName='aaaa'
//                console.log(sql)
            }
            db.transaction(function (fx) {     //查询所有数据
                $("#dCon").html("");
                fx.executeSql(sql,[], function (fx,rs) {
                    for(var i=0;i< rs.rows.length;i++){
                        var s="<div>"+rs.rows.item(i).UserName+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+rs.rows.item(i).Pwd+"</div>";
                        $("#dCon").append(s);
                    }
                });
            });
        }

        // 删除
        function Del(){
            db.transaction(function(fx){
                var username=$("#txtDUserName").val();
                fx.executeSql("delete from UserInfor where UserName=?",[username], function() {
                    alert("删除成功");
                    Sel();
                });
            })
        }

//  删除所有数据
        function DelAll(){
            db.transaction(function(fx){
//                var sql=$("#txtKUserName").val();
                fx.executeSql("delete from UserInfor",[],function(){
                    alert("删除库成功");
                })
            });
        }

    </script>
    <title></title>
</head>
<body>
    <div><input type="text" id="txtAUserName"><input type="password" id="txtPwd"><input type="button" value="添加" onclick="Add()"> </div>
    <div><input type="text" id="txtSUserName"><input type="button" value="查询" onclick="Sel()"></div>
    <div><input type="text" id="txtDUserName"><input type="button" value="删除" onclick="Del()"></div>
    <div><input type="text" id="txtKUserName"><input type="button" value="删除数据库" onclick="DelAll()"></div>
    <div id="dCon"></div>
</body>
</html>

html5之本地数据库的更多相关文章

  1. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  2. HTML5教程之html 5 本地数据库（Web Sql Database）

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  3. HTML5本地数据库（SQLite）示例

    本文转载自http://blog.sina.com.cn/s/blog_641cf27f01016pm5.html 按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite ...

  4. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

  5. HTML5系列三（多媒体播放、本地存储、本地数据库、离线应用）

    各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...

  6. HTML5本地数据库(WebSQL)[转]

    除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌 ...

  7. Html5 学习系列（六）Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

  8. html5本地数据库(一)

    本地数据库 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important ...

  9. Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查

    大家好!我是范范.本人刚接触ST2到现在刚刚两个月,6月1号接的项目,那时才知道有Sencha Touch2这个东西,到现在两个月了期间的幸酸就不说了.今天说说在项目中用到的HTML5的本地存储.可能 ...

随机推荐

  1. Synchronized理解及用法

    加锁: 1.同步实例方法,锁是当前实例对象 2.同步类方法,锁的是当前类对象 3.同步代码块,锁是括号里面的对象 原理: JVM内置锁通过synchronized使用,通过内部对象Monitor(监视 ...

  2. JSON高亮格式化页面显示

    高亮CSS定义: <style type="text/css"> pre {outline: 1px solid #ccc; padding: 5px; margin: ...

  3. <每日一题>题目28：生成随机的测验试卷(单选题)

    #项目:生成随机的测验试卷文件 import random #资料库 capitals = {'北京市':'京','上海市':'沪','天津市':'津','重庆市':'渝','河北省':'冀','山西 ...

  4. NoSQL 文档数据库

  5. Leetcode515. Find Largest Value in Each Tree Row在每个树行中找最大值

    您需要在二叉树的每一行中找到最大的值. 示例: 输入: 1 / \ 3 2 / \ \ 5 3 9 输出: [1, 3, 9] class Solution { public: vector<i ...

  6. php表单字段

    在上一章节我们已经介绍了表的验证规则,我们可以看到"Name", "E-mail", 和 "Gender" 字段是必须的,各字段不能为空. ...

  7. Leetcode485.Max Consecutive Ones最大连续1的个数

    给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 注意: 输入的数组 ...

  8. 使用Python的requests库作接口测试——对HTTP动词的支持

    Requests提供了几乎所有HTTP动词的功能:GET,OPTIONS, HEAD,POST,PUT,PATCH和DELETE. 动词GET-查看提交信息 HTTP GET是一个幂等的方法,从给定的 ...

  9. Django项目：CRM(客户关系管理系统)--41--33PerfectCRM实现King_admin编辑整张表限制

    readonly_table=False#默认表单不锁定 readonly_table=True#默认表单不锁定 # forms.py # ————————19PerfectCRM实现King_adm ...

  10. web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript 浏览器对象

    1.window对象 1.1.window对象: window对象是BOM的核心,window对象指当前的浏览器窗口 所有javaScript全局对象.函数以及变量均自动生成为window对象的成员 ...