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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
JavaScript中的事件处理
Jan 16 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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开发过程中常用函数收藏
2009/12/14 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
js实现图片旋转的三种方法
2014/04/10 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
Vue异步加载about组件
2017/10/31 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
Python实现栈的方法
2015/05/26 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python的in,is和id函数代码实例
2020/04/18 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
信访稳定工作汇报
2014/10/27 职场文书
单位租房协议书范本
2014/12/04 职场文书
离婚起诉书范本
2015/05/18 职场文书
公司食堂管理制度
2015/08/05 职场文书