<!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. 《DSP using MATLAB》Problem 8.7

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  2. css 背景图居中

    参考:http://www.php.cn/css-tutorial-411901.html position : 50% ;或position : center;

  3. Window API 第五篇 WTSEnumerateProcesses

    这个函数可用来枚举系统进程,先来看定义: BOOL WTSEnumerateProcesses( _In_  HANDLE            hServer, _In_  DWORD        ...

  4. webpack 4.0尝鲜

    发布不久得webpack 4.0据说速度快了68% - 98%,然后还支持没配置文件,所以看起来很牛逼得样子 所以尝试一发 webpack和webpack-cli分离 现在执行webpack命令 必须 ...

  5. supports-screensandroid

    最近在做一个开发者入门的专题,因此一直在搜索关于入门开发的知识和资料,希望能够给开始学习Android开发的朋友提供指导性参考.今天找到了一篇不错的技术文章. 语法: <supports-scr ...

  6. PHP的垃圾回收机制（开启垃圾回收机制后的优缺点是什么）

    PHP的垃圾回收机制(开启垃圾回收机制后的优缺点是什么) 一.总结 一句话总结: 拿时间换空间:针对内存泄露的情况,可以节省大量的内存空间,但是由于垃圾回收算法运行耗费时间,开启垃圾回收算法会增加脚本 ...

  7. 处理iphone的 .play() 不能播放问题

    一.添加音乐 <audio id="Jaudio" src="shake.mp3" preload loop="loop" contr ...

  8. 爬虫（四）Selenium + Headless Chrome爬取Bing图片搜索结果

    Bing图片搜索结果是动态加载的,如果我们直接用requests去访问页面爬取数据,那我们只能拿到很少的图片.所以我们使用Selenium + Headless Chrome来爬取搜索结果.在开始前, ...

  9. 封装MySQL C API 基本操作

    根据我的以前的文章 http://blog.csdn.net/skyhuangdan/article/details/21099929 链接数据库成功后进行封装. 我封装类使用的是VS2005下的wi ...

  10. StoryBoard拆分（Storyboard References）

    https://www.jianshu.com/p/78dc76204c8e iOS UI篇10- Storyboard(Storyboard Reference) https://www.aliyu ...