Web SQL Database 测试用/教学用工具

榨取一下Web SQL DB的剩余价值,代码全程无注释.

输入help查看可用命令.

直接输入sql回车即可执行.

例如:

create table user(id,name)
insert into user values(0,'BlackGlory')
select * from user

查看DEMO

<!DOCTYPE html>
<html>
<head>
    <title>Web Sql DB</title>
    <style>
        body{
            margin:0;
            padding:0;
            background:#000;
            color:#FFF;
            overflow:hidden;
        }
        #out{
            position:absolute;
            top:0px;
            height:-moz-calc(100% - 22px);
            height:-webkit-calc(100% - 22px);
            height:calc(100% - 20px);
            width:100%;
            overflow-x:visible;
            overflow-y:scroll;
        }
        #in{
            position:absolute;
            bottom:0px;
            height:20px;
            width:100%;
            background:#000;
            border:1px solid #FFF;
            color:#FFF;
        }
        #out span{
            display:block;
        }
        .green{
            color:green;
        }
        .red{
            color:red;
        }
    </style>
    <script>
        var db=window.openDatabase("websql", "1.0","websql db",1024*1024*10);
        window.onload=function(){
            var out=document.getElementById("out");
            print=function(s,color){
                if(color!=undefined){
                    out.innerHTML+="<span class=\""+color+"\">"+s+"</span>";
                }else{
                    out.innerHTML+="<span>"+s+"</span>";
                }
                out.scrollTop=out.scrollHeight;
            }
            clear=function(){
                out.innerHTML="";
            }
            if(db){
                print("Database created success","green");
            }else{
                print("Database created failed","red");
            }
            var inp=document.getElementById("in");
            inp.focus();
            inp.onkeypress=function(e){
                var self=this;
                if(e.keyCode===13){
                    if(self.value==="clear"){
                        clear();
                        exit;
                    }
                    if(self.value==="help"){
                        print("clear:Clear the screen.");
                        print("help:List of available commands.");
                        exit;
                    }
                    db.transaction(
                        function(tx,result){
                            tx.executeSql(self.value,[],
                                function(tx,result){
                                    if(result){
                                        try{
                                            print("insertId:"+result.insertId);
                                        }catch(error){
                                            console.log(error);
                                        }
                                        for(var i=0;i<result.rows.length;i++){
                                            var item=result.rows.item(i);
                                            if(!i){
                                                var field="|  ";
                                                for(var key in item){
                                                    field+=key+"  |  ";
                                                }
                                                print(field);
                                            }
                                            var value="|    ";
                                            for(var key in item){
                                                value+=item[key]+"  |  ";
                                            }
                                            print(value);
                                        }
                                        print(self.value+" Done","green");
                                    }
                                },
                                function(tx,result){
                                    if(result){
                                        print("Error:"+result.message+" Code:"+result.code,"red");
                                    }
                                }
                            );
                            if(result){
                                print(result);
                            }
                        },
                        function(){
                            console.log("S");
                            self.value="";
                        },
                        function(){
                            console.log("E");
                        }
                    );
                }
            }
        };
    </script>
</head>
<body>
    <article id="out"></article>
    <input id="in" type="text"/>
</body>
</html>