HTML5本地存储来注册登录

来源：互联网发布：石油大亨mac版编辑：程序博客网时间：2024/05/19 19:32

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="css/reset.css"/>        <style type="text/css">            textarea{                resize: none;            }        </style>        <script type="text/javascript">            window.onload=function(){                var oUser=document.getElementById('username');                var oPwd=document.getElementById('password');                var oBtn=document.getElementById('btn');                oBtn.onclick=function(){                    var upData=null;                    var repeat=null;                    if (oUser.value&&oPwd.value) {                        if (window.localStorage.getItem('list')) {                            upData={'username':oUser.value,'password':oPwd.value};                            var dataJson=window.localStorage.getItem('list');                            dataJson=eval('('+dataJson+')');                            for (var i=0;i<dataJson.length;i++) {                                if (dataJson[i].username==upData.username) {                                    alert('用户名重复');                                    repeat=1;                                }                            }                            if (repeat==null) {                                alert('注册成功');                                dataJson.push(upData);                                dataJson=JSON.stringify(dataJson);                                window.localStorage.setItem('list',dataJson);                                console.log(window.localStorage.getItem('list'));                            }                        } else {                            upData={'username':oUser.value,'password':oPwd.value};                            console.log(upData);                            var data=[];                            data.push(upData);                            data=JSON.stringify(data);                            window.localStorage.setItem('list',data);                            alert('注册成功');                            console.log(window.localStorage.getItem('list'));                        }                    }                }            }        </script>    </head>    <body>        <form action="" method="post">            用户名：<input type="text" id="username" /><br />            密码：<input type="password" id="password" /><br />            <input type="button" id="btn" value="注册" />        </form>    </body></html>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="css/reset.css"/>        <style type="text/css">            textarea{                resize: none;            }        </style>        <script type="text/javascript">            window.onload=function(){                var oUser=document.getElementById('username');                var oPwd=document.getElementById('password');                var oBtn=document.getElementById('btn');                oBtn.onclick=function(){                    var login={'username':oUser.value,'password':oPwd.value};                    var dataJson=window.localStorage.getItem('list');                    var success=null;                    dataJson=eval('(' + dataJson + ')');                    for (var i=0;i<dataJson.length;i++) {                        if (dataJson[i].username==login.username&&dataJson[i].password==login.password) {                            alert('登陆成功');                            success=1;                        }                    }                    if (success==null) {                        alert('用户名或密码错误');                    }                }            }        </script>    </head>    <body>        <form action="" method="post">            用户名：<input type="text" id="username" /><br />            密码：<input type="password" id="password" /><br />            <input type="button" id="btn" value="登陆" />        </form>    </body></html>

阅读全文

0 0