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

最新推荐文章于 2022-04-01 13:46:29 发布

sweetllh

最新推荐文章于 2022-04-01 13:46:29 发布

阅读量2.9w

点赞数 23

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/sweetllh/article/details/76408472

版权

html5 专栏收录该内容

16 篇文章 3 订阅

订阅专栏

<!DOCTYPE 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) {
            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>

<!DOCTYPE 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>