CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 Web SQL Database(本地存储)

发布时间:『 2017-05-14 07:01』  博客类别:WEB前端  阅读(1522) 评论(0)

如果是要本地浏览器保存复杂的数据,则可以借助Web SQL Database API来实现,可以使用的SQL语句完场复杂数据的存储与查询。

Web SQL Database 规范使用的是SQLite数据库,它允许应用程序通过一个异步的JavaScripte接口访问数据库。虽然Web SQL不属于HTML5规范,而且Html5最终也不会选择它,但是对于移动领域是非常有用的,以为在任何情况下,SQLAPI在数据库中的数据处理能力都是无法比拟的。

Web SQL Database 入门

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>hello world</title>  
        <script type="text/javascript">  
            //1.打开数据库,该方式有五个参数,第一个参数表示数据库名,第二个参数表示版本号,第三个参数表示数据库的描述,第四个参数表示数据库的大小,第五个参数表示创建回调函数  
            var db=openDatabase("TestDB","1.0","测试数据库",2*1024*1024);  
            //2.创建数据表  
            db.transaction(function(tx){  
                tx.executeSql("create table if not exists UserName (id unqiue,Name)");  
                //3.添加数据至数据表  
                tx.executeSql("insert into UserName(id,name) values (1,'张三')");  
                tx.executeSql("insert into UserName(id,name) values (2,'李四')");  
            });  
            //4. 读取数据库中的数据  
            db.transaction(function (tx){  
                tx.executeSql("select * from UserName",[],function(tx,results){  
                    var len=results.rows.length;  
                    for(var i=0;i<len;i++)  
                        console.log(results.rows.item(i).Name);  
                },null);  
            });  
        </script>  
    </head>  
    <body>   
    </body>  
</html>

可以说使用起来还是挺简单容易上手的。

HTML5 Web SQL Database

基本的数据库操作实例

设计一个简易的管理界面,包含一个填写姓名的组件,并有一个查询按钮,可以查询Web SQL数据库中的数据。添加按钮可以添加数据,如果单击列表中的编辑,则表单会对该项进行编辑更新,实际效果如果所示:

HTML5 Web SQL Database 实例

HTML5 本地存储 案例代码

<!DOCTYPE html>  
<html>  
    <head>  
    <meta charset="UTF-8">  
    <title>本地数据访问实例e</title>  
    <script type="text/javascript">  
        //初始化页面的脚本  1.打开数据库  2. 创建/打开数据表  
        //打开数据库,如果不存在则创建  
        var db=openDatabase("TestDB","1.0","测试数据库",2*104*1024);  
        //创建/打开数据表,如果存在则不创建  
        db.transaction(function(tx){  
            tx.executeSql("create table if not exists UserName(id unique,Name)");  
        });  
        //实现查询数据  
        function Query(){  
            var name=document.getElementById("name");  
            db.transaction(function(tx){  
                tx.executeSql("select * from UserName where Name like'%"+name.value+"%' order by id desc ",[],function(tx,results){  
                    var len=results.rows.length;  
                    var msg="";  
                    for(var i=0;i<len;i++){  
                        msg+="<li> ";  
                        msg+="<span>"+results.rows.item(i).Name+"</span>";  
                        msg+="<a href='###' onclick=\" SetForm('"+results.rows.item(i).id+"','"+results.rows.item(i).Name+"') \">编辑</a> ";   
                        msg+="<a href='###' onclick='Delete("+results.rows.item(i).id+")'>删除</a>";  
                        msg+="</li>";  
                    }  
                    document.getElementById("msg").innerHTML=msg;  
                },null);  
            });  
        }  
        //初始化表单  
        function SetForm(id,name){  
            if(id){  
                document.getElementById("id").value=id;  
                document.getElementById("name").value=name;  
                document.getElementById("submit").onclick=function(){Update();};  
                document.getElementById("submit").innerHTML="更新";  
            }else{  
                document.getElementById("id").value="";  
                document.getElementById("name").value="";  
                document.getElementById("submit").onclick=function(){Insert();};  
                document.getElementById("submit").innerHTML="添加";  
            }  
        }  
    </script>  
    <script type="text/javascript">  
        function Insert(){  
            //添加数据  
            var name=document.getElementById("name").value;  
            if(name=="") return;  //没有值,则不处理  
            //获取可用的最小id值  
            var maxid;  
            db.transaction(function(tx){  
                tx.executeSql("select id from UserName order by id desc",[],function(tx,result){  
                    if(result.rows.length)  
                        maxid=parseInt(result.rows.item(0).id)+1;  
                    else  
                        maxid=1;  
                },null);  
            });  
            //添加一条数据,并更新显式  
            db.transaction(function(tx){  
                tx.executeSql("insert into UserName(id,name) values('"+maxid+"','"+name+"')",[],function(tx,result){  
                    SetForm();  
                    Query();  
                });  
            });  
        }  
        //更新数据  
        function Update(){  
            db.transaction(function(tx){  
                var id=document.getElementById("id").value;  
                var name=document.getElementById("name").value;  
                console.log(name);  
                tx.executeSql("update UserName set Name='"+name+"' where id='"+id+"'",[],function(tx,result){  
                    SetForm();  
                    Query();  
                });  
            });  
        }  
        //删除数据  
        function Delete(id){  
            db.transaction(function(tx){  
                tx.executeSql("delete from UserName where id='"+id+"'",[],function(tx,results){  
                    SetForm();  
                    Query();  
                });  
            });  
        }  
    </script>  
    </head>  
    <body>  
        <input type="hidden" id="id">  
        <input type="text" id="name" placeholder="请输入姓名"/>  
        <button onclick="Insert()" id="submit">添加</button>  
        <button onclick="Query()">查询</button><br/>  
        <ul id="msg"></ul>  
    </body>  
</html>

至此,与数据库有关的基本操作完成,我们可以在运行的页面上实现数据的添加、修改、删除和查询。


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   HTML5     本地存储     SQLite     openDatabase     executeSql  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有