HTML5本地存储Localstorage实现注册登录以及验证
2017-07-17 11:12
671 查看
更详细的博客转移到了我的github+hexo博客:https://zc95.github.io
源码引用的js、jquery都是在线的,代码拷到本地就能运行登录:
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>登录</title> <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header"> <div class="h1 title">登录</div> </div> <div class="content has-header"> <div class="list"> <label class="item item-input"> <span class="input-label">用户名:</span> <input id="loginName" type="text"> </label> <label class="item item-input"> <span class="input-label">密码:</span> <input id="loginPsd" type="password"> </label> </div> <div class="padding"> <button onclick="login()" class="button button-block button-positive">登录</button> </div> </div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script><script>function login(){if(NoKong()){if(localStorage.user){arr = eval(localStorage.user);//获取localStoragevar k = 0;for(e in arr){if($('#loginName').val()==arr[e].loginName){if($('#loginPsd').val()==arr[e].loginPsd){alert('登录成功');clear();k
= 0;return;}else{alert('密码错误');clear();k = 0;return;}}else{ k = 1;}}if(k==1){alert('用户名不存在');clear();}}else{alert('用户名不存在');clear();}}}function clear(){$('#loginName').val('');$("#loginPsd").val('');}function NoKong(){if($('#loginName').val()==""){alert('用户名不能为空');return
false;}else if($('#loginPsd').val()==""){alert('密码不能为空');return false;}return true;}</script> </body></html>
注册:
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>注册</title> <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header"> <div class="h1 title">注册</div> </div> <div class="content has-header"> <div class="list"> <label class="item item-input"> <span class="input-label">用户名:</span> <input id="loginName" type="text"> </label> <label class="item item-input"> <span class="input-label">密码:</span> <input id="loginPsd" type="password"> </label> </div> <div class="padding"> <button onclick="ZhuCe()" class="button button-block button-positive">注册</button> </div> </div> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> <script> function ZhuCe(){ if(NoKong()){ var arr = []; if(localStorage.user){ arr = eval(localStorage.user); for(e in arr){ if($('#loginName').val()==arr[e].loginName){ alert('该账号已被注册'); clear(); return; } } } var user = {'loginName':$("#loginName").val(),'loginPsd':$("#loginPsd").val()}; arr.push(user); localStorage.user=JSON.stringify(arr); alert('注册成功'); clear(); } } function clear(){ $('#loginName').val(''); $("#loginPsd").val(''); } function NoKong(){ if($('#loginName').val()==""){ alert('用户名不能为空'); return false; }else if($('#loginPsd').val()==""){ alert('密码不能为空'); return false; } return true; } </script> </body> </html>
相关文章推荐
- HTML5的本地存储localStorage以及简单应用
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- Html5系列(十一)store.js - 轻松实现本地存储(LocalStorage)
- HTML5本地存储-localStorage如何实现定时存储
- 利用html5的本地存储功能实现登录用户信息保存
- HTML5本地存储来注册登录
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- html5 localStorage实现表单本地存储
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- 利用html5的本地存储功能实现登录用户信息保存
- HTML5本地存储-localStorage如何实现定时存储
- HTML5本地储存追加利用html5的本地存储功能实现登录用户信息保存
- 【MVC】会员注册/登录,普通验证,会员名是否注册Ajax验证以及会员邮件验证实现原理
- html5 localStorage实现表单本地存储
- JS本地存储信息的实现方式(localStorage 与 userData)
- Android——XUtils3实现登录和注册页面校验,正则验证
- HTML5 LocalStorage 本地存储
- Html5本地存储LocalStorage
- HTML5本地存储localstorage
- 解析HTML5中的新功能本地存储localStorage