HTML5本地数据库来做注册登录功能

注册


<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
    head>

    <body>
        用户名:<input type="text" name="" id="" value="" /> 密码:
        <input type="password" name="" id="" value="" />
        <input type="button" name="" id="btn" value="注册" />
        <button type="button" id="clear">清除数据button>
    body>
    <script type="text/javascript">
        var aInputs = document.getElementsByTagName('input');
        var oClear = document.getElementById('clear');
        var db = openDatabase('zuchedenglu', '1.0', 'textdb', '1024*1024');
        db.transaction(function(contex) {
            contex.executeSql('create table if not exists userinf(id unique,name,password)');
        });
        var oBtn = document.getElementById('btn');
        var num = 0;
        oBtn.onclick = function() {
            if (aInputs[0].value && aInputs[1].value) {
                db.transaction(function(contex) {
                    contex.executeSql('select * from userinf', [], function(con, data) {
                        var leg = data.rows.length,
                            i;
                        for (var i = 0; i < leg; i++) {
                            if (aInputs[0].value == data.rows.item(i).name) {
                                alert('该用户名已注册!');
                                return;
                            }
                        }
                        num =leg +1;
                    });
                    contex.executeSql('insert into userinf(id,name,password) values("' + num + '","' + aInputs[0].value + '","' + aInputs[1].value + '")');
                    alert('注册成功');
                });
            } else {
                alert('请填写完整的账号密码!');
            }
        }
        oClear.onclick=function(){
            db.transaction(function(contex) {
                contex.executeSql('drop table userinf');
            });
        }
    script>

html>

登录


<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
    head>

    <body>
        用户名:<input type="text" name="" id="" value="" /> 密码:
        <input type="password" name="" id="" value="" />
        <input type="button" name="" id="btn" value="登陆" />
        <button type="button" id="clear">清除数据button>
    body>
    <script type="text/javascript">
        var aInputs = document.getElementsByTagName('input');
        var oClear = document.getElementById('clear');
        var db = openDatabase('zuchedenglu', '1.0', 'textdb', '1024*1024');
        db.transaction(function(contex) {
            //  tx.executeSql('drop table userinf');
            //contex.executeSql('create table if not exists userinf(id unique,name,password)');
            contex.executeSql('create table if not exists userinf(id integer primary key AutoIncrement,name,password)');
        });
        var oBtn = document.getElementById('btn');
        var blogin = true;
        oBtn.onclick = function() {
            if (aInputs[0].value && aInputs[1].value) {
                db.transaction(function(contex) {
                    contex.executeSql('select * from userinf', [], function(con, data) {
                        var leg = data.rows.length,
                            i;
                        for (var i = 0; i < leg; i++) {
                            if (aInputs[0].value == data.rows.item(i).name && aInputs[1].value == data.rows.item(i).password) {
                                blogin = false;
                                break;
                            }
                        }
                        if (blogin) {
                            alert('请输入正确的账号和密码!');
                        } else {
                            alert('登陆成功!');
                        }
                    });
                });
            } else {
                alert('请填写完整的账号密码!');
            }
        }
        oClear.onclick = function() {
            db.transaction(function(contex) {
                contex.executeSql('drop table userinf');
            });
        }
    script>

html>

你可能感兴趣的:(html5)