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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
react国际化react-intl的使用
May 06 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
PHP脚本的10个技巧(4)
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python内存映射文件读写方式
2020/04/24 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
追悼会子女答谢词
2014/01/28 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
python lambda 表达式形式分析
2022/04/03 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript