<!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. python 模拟键盘输入

    备忘录 import win32api import win32con win32api.keybd_event(17,0,0,0) #ctrl键位码是17 win32api.keybd_event( ...

  2. 坐标转换，EPSG:4326转换成高德坐标教程

    这里先给大家介绍几个坐标系: 1.WGS84:国际坐标系,为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系.2.GCJ02:火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标 ...

  3. Leetcode 125.验证回文字符串(Python3)

    题目: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, ...

  4. win10 安装face_recongnition

    1.安装dlib https://stackoverflow.com/questions/41912372/dlib-installation-on-windows-10 2.安装face_recon ...

  5. pyinstaller 打包python3.6文件成exe 运行

    1.安装pyinstaller  切换到安装目录下script 运行  如我的目录:F:\Program Files\Python36\Scripts pip  install pyinstaller ...

  6. 【linux之路】常用的命令

    用bash插入代码 1.查看ubuntu的版本号 lsb_release –a //linux标准基础(Linux Standards Base):release发布 2.查看Ubuntu的内核 un ...

  7. 此处有加速 apt-get github docker pull

    ubuntu get-apt 加速 创建 aptupdate.sh 脚本,内容为: #!/bin/bash mv /etc/apt/sources.list /etc/apt/sources.list ...

  8. OpenCASCADE动画功能

    OpenCASCADE动画功能 eryar@163.com 1.Introduction OpenCASCADE提供了类AIS_Animation等来实现简单的动画功能. 从其类图可以看出,动画功能有 ...

  9. 匿名/局部内部类访问局部变量时，为什么局部变量必须加final

    我们都知道方法中的匿名/局部内部类是能够访问同一个方法中的局部变量的,但是为什么局部变量要加上一个final呢? 首先我们来研究一下变量生命周期的问题,局部变量的生命周期是当该方法被调用时在栈中被创建 ...

  10. 【DM8168学习笔记1】帮您快速入门 TI 的 Codec Engine

    http://www.ti.com.cn/general/cn/docs/gencontent.tsp?contentId=61575 德州仪器半导体技术(上海)有限公司 通用DSP 技术应用工程师 ...