JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

2024-05-06 15:44:18

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能。分享给大家供大家参考，具体如下：

源码引用的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="external nofollow" rel="external nofollow" 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 οnclick="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="external nofollow" rel="external nofollow" 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 οnclick="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>

上一篇：node.js制作一个简单的登录拦截器

下一篇：javascript 原型与原型链的理解及应用实例分析