<!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. Create STKNetDiskC Instance Error

    关于Create STKNetDiskC Instance Error错误的解决方法 这个错误可能出现在: AM8 附件直接存网盘的时候 报错 解决方法步骤如下: 在出现该错误的机器上,先将AM及 m ...

  2. XAMPP：继MAMP之后，Mac OS X平台下又一款帮你快速搭建服务器环境软件

    之前,有很多人都有打算在自己的Mac OS下搭建一个本地测试用的Apache+PHP+MySQL网络服务器环境. 在目前而言至少有3种办法可以实现这一点: 通过Xcode开发者套件和php.Apach ...

  3. MyBatis-Spring(四)--MapperFactoryBean实现增删改查

    上一篇文章中提到,使用SqlSessionTemplat时需要输入一长串字符串来获取mapper,这种方式IDE不会检查程序的准确性并且很容易出错,所以这篇文章介绍另一种可以避免这种问题,并且也可以使 ...

  4. Ceisum官方教程2 -- 项目实例（workshop）

    原文地址:https://cesiumjs.org/tutorials/Cesium-Workshop/ 概述 我们很高兴欢迎你加入Cesium社区!为了让你能基于Cesium开发自己的3d 地图项目 ...

  5. 交叉熵-loss-理解

    参考链接: https://blog.csdn.net/tsyccnh/article/details/79163834

  6. odoo web controller

    Routing openerp.http.route(route=None, **kw) Decorator marking the decorated method as being a handl ...

  7. stream之累加求和

    1.集合中直接包含BigDecimal元素的累加 List<Integer> list = new ArrayList<>();list.add(3);list.add(7); ...

  8. vmware三种网络模式配置（转载）

    虚拟机系统安装的是Linux系统 首先,在本机上查看所有网络配置连接,使用命令:ipconfig Microsoft Windows [版本 6.1.7600]版权所有 (c) 2009 Micros ...

  9. git与github建立链接（将本次项目与网络GitHub同步） --转存笔记

    转载自:https://blog.csdn.net/qq_36529459/article/details/79047220 1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可 ...

  10. 一站式WPF--依赖属性（DependencyProperty）一

    Windows Presentation Foundation (WPF) 提供了一组服务,这些服务可用于扩展公共语言运行时 (CLR) 属性的功能,这些服务通常统称为 WPF 属性系统.由 WPF ...