<!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. java中 &&与& ||与| 的区别

    public class Demo { public static void main(String[] args) { int i = 5; int j = 3; // || 与 | 的区别 boo ...

  2. 新浪新闻API

    新浪新闻API ustcmio 关注 2017.01.15 20:44* 字数 536 阅读 2479评论 2喜欢 7 新浪新闻的API:1.访问手机新浪网https://sina.cn/?from= ...

  3. centos Python2.6 升级到2.7

    需求: centos 6.x 系统默认Python 版本都是2.6,实际生产环境中需要用到Python 2.7.x Python 2.7 下载地址 [root@ansible package]# wg ...

  4. 模板：ST表

    ST表:解决RMQ类问题,预处理$O(nlog_{2}n)$,查询$O(1)$ 较线段树来说每次查询为1,线段树为log,但ST表不方便更改 ST表还用了倍增思想. 模板: struct ST_MAP ...

  5. Ubuntn16.04修改pip源

    将python的pip源修改为中科大的镜像 cd ~ touch pip.conf sudo gedit pip.conf 在新打开的文件中写入: [global] trusted-host = py ...

  6. centos7 盘符变动 绑定槽位

    服务器下的硬盘主有机械硬盘.固态硬盘以及raid阵列,通常内核分配盘符的顺序是/dev/sda./dev/sdb… ….在系统启动过程中,内核会按照扫描到硬盘的顺序分配盘符(先分配直通的,再分配阵列) ...

  7. 010-利用Selenium+python自动输入博客账号密码登录

    from selenium import webdriver import time def OpenUrl(): # 访问网址 driver.get(url) def Login(): # 查询登录 ...

  8. 作业test

    views Car <template> <div class="car"> <Nav/> <div class="wrap&q ...

  9. PetaPoco 基础操作

    //初始化数据库连接 var db=new PetaPoco.Database("connectionStringName"); //查询单个值 long count=db.Exe ...

  10. No module named 'sklearn.impute'，更新scikit-learn

    -------我错了,本篇作废,我把自己的包更新坏了,大家不要往下看了------------------最终我是把anaconda卸载重装的--------- 使用scikit-learn模块进行缺 ...