html5之本地数据库

<!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>
时间: 2024-12-11 02:46:08

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

html5的本地数据库

之前的应用一直用的是html5的本地存储LocvalStorage,挺方便也很实用. 最近开始做一个类似于离线电话簿的应用,于是得学习html5的本地数据库. sql语言大体上还是相同的,当然也有不一样的地方,我觉得以sqlite的为标准不容易出错. 开始前对html websql的操作可以有一下几种方式备选: 1:使用js和html5原生的方式来操作: 2:使用appcan开发环境中的数据库模块来操作: 该模块包含了appcan对数据库的基础操作 appcan.database.create(

HTML5中本地数据库(SQLLite)的基础

在html5中,可以像访问本地文件那样轻松的对内置数据库进行直接访问. html5中内置了两种数据库,一种为SQLLite,另一种为indexedDB. 在js中使用SQLLite数据库的步骤: 1.创建访问数据库的对象 var db = openDatabase("myDB","1.0","test db",1024*100); 说明: 1. 该方法返回的是创建的数据库的对象,如果该数据库不存在才会创建这个数据库. 2. 第一个参数:数据库的名

HTML5本地数据库详解

对于复杂的数据库,HTML5使用本地数据库进行操作.这是一个浏览器端的数据库.在本地数据库中我们可以直接利用JavaScript创建数据库,并利用SQL语句执行相关的数据库操作.下面分别介绍本地数据库的各个API及其使用方法. 1.利用openDatabase创建数据库 我们可以利用openDatabase方法创建数据库.openDatabase方法传递五个参数,分别是:数据库名.数据库版本号(可省略).对数据库的描述.设置分配的数据库的大小.回调函数. 如果我们要创建一个本地数据库,可以执行如

HTML5笔记3——Web Storage和本地数据库

上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端 保存诸如用户名等简单用户信息,但通过长期使用,人们发现使用Cookies存储永久数据存在几个问题. 大小:Cookies的大小被限制在4KB 带宽:Cookies是随HTTP失误一起被发送的,因此会浪费一部分发送Cookies时使用的带宽 复杂性:要正确的

html5本地存储(三)--- 本地数据库 indexedDB

html5内置了2种本地数据库,一是被称为"SQLLite",可以通过SQL语言来访问文件型SQL数据库.二是被称为"indexedDB" 的NoSQL类型的数据库,本篇主要讲indexedDB数据库. 该数据库是一种存储在客户端本地的NoSQL数据库,目前chrome11以上.Firefox4以上.Opera18以上.Safar8以上及IE10以上的浏览器提供支持 一.连接数据库 使用indexedDB.open方法连接数据库 var dbName = 'inde

Html5 学习系列(六)Html5本地存储和本地数据库

一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简,想存储复杂的.关系型的用户数据就根本不可能了.但是进入Html5时代,这一切都不叫事... 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是C

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

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorage 将数

html5本地数据库(一)

本地数据库 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /

(转)HTML5 本地数据库(SQLite) 示例

  HTML5 本地数据库(SQLite) 示例 2012-05-07 16:21:13 标签:SQLite HTML5本地数据库 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://supercharles888.blog.51cto.com/609344/856071 按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite数据库的例子,感觉这个功能蛮好玩的,但是还不够强大,尤其浏览器支持力度不够: