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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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学习之PHP变量
2006/10/09 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php自定义apk安装包实例
2014/10/20 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
Python中偏函数用法示例
2018/06/07 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
django 取消csrf限制的实例
2020/03/13 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
2014教师评职称工作总结
2014/11/10 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
单身证明格式样本
2015/06/15 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
vue实力踩坑之push当前页无效
2022/04/10 Vue.js