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


Posted in Javascript onFebruary 10, 2020

本文实例讲述了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>

更多关于JavaScript相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
node.js制作一个简单的登录拦截器
Feb 10 #Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 #Javascript
jQuery实现简易QQ聊天框
Feb 10 #jQuery
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 #Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 #Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 #Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 #Javascript
You might like
文件上传程序的全部源码
2006/10/09 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python监控文件并且发送告警邮件
2018/06/21 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python实现中文文本分句的例子
2019/07/15 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
大专生简历的自我评价
2013/11/26 职场文书
税务会计岗位职责
2014/02/18 职场文书
公司委托书范本5篇
2014/09/20 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2014年标准化工作总结
2014/12/17 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
公司员工手册范本
2015/05/14 职场文书
迎新年主持词
2015/07/06 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python