<script src="jquery-1.8.3.js"></script>
<script>
/* IE11不支持此操作
创建数据库
解释一下openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：
1，数据库名称。
2，版本号 目前为1.0,不管他，写死就OK。
3，对数据库的描述。
4，设置数据的大小。
5，回调函数(可省略)。
*/
var db=openDatabase("myDB","1.0","testDB",1024*1024,function(){});
//添加
function add()
{
    var username=$("#username").val();
    var pwd=$("#pwd").val();
    //transaction：这个方法允许我们根据情况控制事务提交或回滚。
    db.transaction(function(fx){
        //executeSql执行SQL语句创建表，并新建字段
        fx.executeSql("create table if not exists UserInfo(UserName TEXT,Pwd TEXT)",[]);
        fx.executeSql("insert into UserInfo values(?,?)",[username,pwd],function(){
            alert("添加成功")
            },function(){
            alert("添加失败");
                })
        })
    
}
//获取
function get()
{
    var username=$("#username").val();
    db.transaction(function(fx){
        //也可以用select * from UserInfo where UserName='"+username+"'
        fx.executeSql("select * from UserInfo where UserName=?",[username],function(fx,rs){
            if(rs)
            {
                for(var i=0;i<rs.rows.length;i++)
                {
                    var str="<p>用户名："+rs.rows.item(i).UserName+"&nbsp;&nbsp;密码："+rs.rows.item(i).Pwd+"</p>";
                    $("#content").append(str);
                }            
            }
            
            });
        })

}
//删除
function del()
{
    var username=$("#username").val();
    db.transaction(function(fx){
        fx.executeSql("delete from UserInfo where UserName=?",[username],function(fx,rs){
            alert("删除成功");
            get();
            });
        })

}

</script>
<body>
<input type="text" id="username">
<input type="text" id="pwd">
<input type="button" onClick="add()" value="添加">
<input type="button" onClick="get()" value="获取">
<input type="button" onClick="del()" value="删除">
<div id="content"></div>

html5-本地数据库的操作的更多相关文章

  1. HTML5本地数据库（SQLite）示例

    本文转载自http://blog.sina.com.cn/s/blog_641cf27f01016pm5.html 按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite ...

  2. HTML5本地数据库(WebSQL)[转]

    除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌 ...

  3. (转)HTML5 本地数据库（SQLite） 示例

      HTML5 本地数据库(SQLite) 示例 2012-05-07 16:21:13 标签:SQLite HTML5本地数据库 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作 ...

  4. html5本地数据库(一)

    本地数据库 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important ...

  5. 【HTML5】HTML5本地数据库（Web Sql Database）

    Web Sql数据库简介 Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库. Web SQL数据库的浏览器支持情况 Web SQL 数 ...

  6. Xamarin.Android 本地数据库 SQLiteDatabase 操作

    目的:使用 SQLiteDatabase 创建本地数据库.表,并对数据进行增删改查操作. 引用命名空间: using Android.App; using Android.Widget; using ...

  7. HTML5本地存储 localStorage操作使用详解

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  8. HTML5 本地数据库（SQLite） 示例

    http://supercharles888.blog.51cto.com/609344/856071 http://www.sqlite.org/download.html

  9. HTML5教程之html 5 本地数据库（Web Sql Database）

    HTML5的Web SQL Databases(html5 本地数据库)的确很诱惑人,当你发现可以用与mysql查询一样的查询语句来操作本地数据库时,你会发现这东西挺有趣的.今天,我们一起来了解HTM ...

  10. Html5 学习系列（六）Html5本地存储和本地数据库

    一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...

随机推荐

  1. 8VC Venture Cup 2016 - Final Round (Div. 2 Edition) D. Factory Repairs 树状数组

    D. Factory Repairs 题目连接: http://www.codeforces.com/contest/635/problem/D Description A factory produ ...

  2. Manthan, Codefest 16 C. Spy Syndrome 2 字典树 + dp

    C. Spy Syndrome 2 题目连接: http://www.codeforces.com/contest/633/problem/C Description After observing ...

  3. JavaScript 开发的45个技巧

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  4. BabyLinux制作过程详解

    转:http://www.360doc.com/content/05/0915/14/1429_12641.shtml BabyLinux制作过程详解 作者:GuCuiwen email:win2li ...

  5. TSynAuthentication SESSION验证

    TSynAuthentication SESSION验证 服务端维护的SESSIONS,实质上是一个array of integer,保存的是客户端的SESSIONID. SESSIONID可以由客户 ...

  6. Tesseract训练中文字体识别

    注:目前仅说明windows下的情况 前言 网上已经有大量的tesseract的识别教程,但是主要有两个缺点: 大多数比较老,有部分内容已经不适用. 大部分只是就英文的训练进行探索,很少针对中文的训练 ...

  7. 关于V1.6.0版本的项目总结

    10月28号,我们开了1.6项目的总结大会,包括Ting总在内,前端.后台.运维都来参加总结大会了.虽然目标基本达成,但同时也暴露出很多问题,我们希望各方能够坐下来总结一下自己或者各个相关团队的功过是 ...

  8. iOS：极光推送控制器跳转

    在前面已经做完了极光消息的推送,那么有消息了,如何跳转到需要的控制器呢?其实,主要还是在userInfo这个消息里面做判断来处理,具体如下: 下面这两个是远程推送时接收消息的方法,这是应用程序提供的方 ...

  9. 用ACE来写代码

    写在前面 在很多时候,我们想用一个支持高亮的WEB编辑器来做规则配置.代码编辑等,此时ACE应该是一个不错的选择,简单的用法如下: <!DOCTYPE html> <html lan ...

  10. flask使用ajax上传图片或者文件

    function upload_cover(){ var cover = new FormData(); var fileObj = document.getElementById('cover'). ...