登录相关业务逻辑（模拟登录、注册）

关于H5本地存储的内容，登录、注册案例可以很好的运用到相关的内容，此案例掌握的熟练，就可以很好的理解本地存储的内容啦！本文就详细的讲解了登录注册相关的业务逻辑、以及相关页面的源码，大家可以仔细阅读哦！（tips:如果有错误还请各位大佬指正哦！）

业务逻辑思维导图

视频：

页面一：注册

组成1：用户名

正则验证

组成2：用户密码

正则验证

组成3：确认密码

判断是否与用户密码相等

组成4：注册按钮

给注册按钮绑定单击事件
- 1. 正则验证
  - （1）验证用户名是否正确
    - 结果一：正确 --》进行下一步：验证密码
    - 结果二：不正确
      - 提示alert(‘用户名输入有误！’) return
  - （2）验证密码是否正确
    - 结果一：正确 --》进行下一步：判断两次密码是否相等
    - 结果二：不正确
      - 提示alert(‘密码输入有误！’) return
- 1. 验证两次密码是否相等
  - 结果一：相等
  - 结果二：不相等
    - 提示alert(‘两次密码不一致！’) return
- 3.获取已经注册的信息，判断用户名是否重复
  - 结果一：重复
    - 提示alert(‘用户名已被注册，不可以使用！’) return
  - 结果二：不重复
    - 操作1：把用户注册信息Push到arr数组中
    - 操作2：存储到本地：需要把arr转化位字符串
    - 操作3：提示alert(‘注册成功！’)
    - 操作4：存储之后跳转到登录页面

具体代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模拟注册</title><style>p {margin: 10px;}input[type="text"],input[type="password"] {width: 180px;height: 20px;padding-left: 5px;}</style>
</head><body><form><p><label for="user">用户名：</label><input type="text" name="username" id="userName" placeholder="2-8位汉字"></p><p><label for="pwd">用户密码：</label><input type="password" name="userpwd" id="userPwd" placeholder="6-16位（英文大小写/数字_-）"></p><p><label for="pwd">确认密码：</label><input type="password" name="repwd" id="rePwd" placeholder="确认密码"></p><p><input type="button" value="注册" id="regBtn"></p></form><script>// 思路：// 1. 点击注册按钮，进行正则判断：判断用户账号、用户密码、确认密码是否输入正确// 2. 获取到用户账号，用户密码// 3. 注册成功后，把用户注册信息存放在本地存储中// 4. 跳转到登录页面// 获取注册按钮var regBtn = document.querySelector('#regBtn');// 获取用户账户框var inpName = document.querySelector('#userName');// 获取用户密码框var inpPwd = document.querySelector('#userPwd');// 获取用户密码框var inpRepwd = document.querySelector('#rePwd');// 给注册按钮绑定点击事件regBtn.onclick = function() {// 获取到用户账号的值var userNameVal = inpName.value;// 获取到用户密码的值var userPwdVal = inpPwd.value;// 获取到确认密码的值var rePwdVal = inpRepwd.value;// 正则表达式// 用户账号var userReg = /^[\u4e00-\u9fa5]{2,8}$/;// 密码var pwdReg = /^[a-zA-Z0-9_-]{6,16}$/;// 封装验证的方法function yz(reg, inputEle) {if (reg.test(inputEle.value)) {// 校验通过return true;} else {// 校验不通过return false;}};// 拿到每个输入框的返回值var isflag1 = yz(userReg, inpName);var isflag2 = yz(pwdReg, inpPwd);var isflag3 = yz(pwdReg, inpRepwd);// 如果用户名和密码有一个返回值是错误的，则就无法登录成功if (!isflag1 || !isflag2 || !isflag3) {alert('请正确输入用户名和密码！');return;}if (userPwdVal !== rePwdVal) {alert('密码不一致，请重新输入！');inpRepwd.value = '';return;}// 存储用户注册的信息// 逻辑：// 1. 从本地数组中获取data的值// 2. 如果有的话，就直接push是可以的// 3. 但是如果data没有内容的话,那么会得到一个null，null是没有push方法可以调用，所以会报错。// 4. 这里就需要用||运算符来实现兼容操作// localStorage.getItem('data') 获取data内容// 如果localStorage.getItem('data')是TRUE  就直接格式化然后push（json格式字符串转对象）// 如果localStorage.getItem('data')是false，就直接执行|| 后面的内容 就是给一个空数组//(1)获取已经注册的信息var dataObj = localStorage.getItem('data');var arr = JSON.parse(dataObj) || []; //true执行||前面  false执行||后面//(2)存储用户注册的信息之前判断用户名是否重复// 循环data数组for (var i = 0; i < arr.length; i++) {if (arr[i].userNameVal == inpName) {alert('用户名已被注册，不可以使用！');return;}}// 注册成功之后，把用户注册信息Push到arr数组中arr.push({uname: userNameVal,upwd: rePwdVal});// 存储到本地：需要把arr转化位字符串var arrStr = JSON.stringify(arr);localStorage.setItem('data', arrStr);alert('注册成功！');// 存储之后跳转到登录页面location.href = './01-免登录.html'}</script>
</body></html>

页面二：登录

组成1：用户名

正则验证

组成2：密码

正则验证

组成3：登录按钮

免登录：
- 获取用户输入的账号是否存在本地存储
  - 判断userInfo是否存在
    
    userInfo是找localStorage中存在的user信息
    - 结果一：存在
      - 把获取到的用户信息userInfo转换成json对象
        userInfo是json字符串
      - 获取到用户的用户名uname以及用户密码upwd
给登录按钮绑定单击事件
- 1.正则验证
  - （1）验证用户名是否正确
    - 结果一：正确 --》进行下一步：验证密码
    - 结果二：不正确
      - 提示alert(‘用户名输入有误！’) return
  - （2）验证密码是否正确
    - 结果一：正确 --》进行下一步：判断两次密码是否相等
    - 结果二：不正确
      - 提示alert(‘密码输入有误！’) return
- 2.拿到已经注册了的信息
  - 判断arr（本地存储的data数据）里面是否存在对应的用户名
    - 结果一：不存在
      - 提示alert(‘账号没有注册！’) return
    - 结果二：存在
      - 进行下一步==》验证密码
  - 判断密码框的值和本地存储的用户信息的密码是否一致
    - 结果一：错误
      - 提示alert(‘密码错误！’) return
    - 结果二：正确
      - 操作1：把获取到的内容放在对象info中
      - 操作2：把存放在localStorage中
        
        把js对象转换成json字符串：因为localStorage存储的数据只能是字符串
        
        存放在localStorage中，即设置setItem
  - 跳转到首页

具体代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><style>p {margin: 10px;}input[type="text"],input[type="password"] {width: 180px;height: 20px;padding-left: 5px;}</style>
</head><body><form><p><label for="user">用户名：</label><input type="text" name="username" id="userName" placeholder="2-8位汉字"></p><p><label for="pwd">密码：</label><input type="password" name="userpwd" id="userPwd" placeholder="6-16位（英文大小写/数字_-）"></p><p><input type="button" value="登录" id="loginBtn"><a href="./02-模拟注册.html">注册</a></p></form><script>// 思路：// 1. 进入页面之后，起初不存在user，本地存储没有内容// 2. 当进行过一次输入之后，本地存储中存在之前输入过的用户名和密码// 3. 判断localStorage是否已经userName存在，如果已经存在则直接把值赋值给用户名和密码// 4. 给登录按钮绑定点击事件，点击登录获取到用户名和密码存放在localStorage中// 找localStorage中是否存在user// info是本地存储的key// 这个userInfo 是json字符串var userInfo = localStorage.getItem('info');// 获取到用户名框和密码框var inpName = document.querySelector('#userName');var inpPwd = document.querySelector('#userPwd');// 正则表达// 用户名var userReg = /^[\u4e00-\u9fa5]{2,8}$/;// 密码var pwdReg = /^[a-zA-Z0-9_-]{6,16}$/;// 封装验证的方法function yz(reg, inputEle) {if (reg.test(inputEle.value)) {// 校验通过return true;} else {// 校验不通过return false;}}// 1. 判断userInfo是否存在if (userInfo) {// 存在// 把获取userInfo（json字符串转换成json对象），并显示到用户名框中// （1）把json字符串转换成json对象，这样才能拿到对象中的属性的值var userObj = JSON.parse(userInfo);// （2）设置用户名框和密码框的内容inpName.value = userObj.uname;inpPwd.value = userObj.upwd;}// 2. 登录按钮绑定单击事件// （1）获取到登录按钮var loginBtn = document.querySelector('#loginBtn');// （2）绑定单击事件loginBtn.onclick = function() {// 获取到用户名var inpNameVal = inpName.value;var inpPwdVal = inpPwd.value;// 拿到每个输入框的返回值var isflag1 = yz(userReg, inpName);var isflag2 = yz(pwdReg, inpPwd);// 如果用户名和密码有一个返回值是错误的，则就无法登录成功if (!isflag1 || !isflag2) {alert('用户名或密码输入有误，请重新输入！')return false;}// //拿到已经注册了的信息var arr = JSON.parse(localStorage.getItem('data')) || [];// //判断用户名和密码和 注册的信息 相比较 是不是正确var dataStr = arr.find(function(item) {return item.uname === inpNameVal;})console.log(dataStr);if (!dataStr) {alert('账号没有注册！');return;}if (dataStr.upwd !== inpPwdVal) {alert('密码错误！');return;}// 存放在localStorage中// 把获取到的内容放在对象中var info = {uname: inpNameVal,upwd: inpPwdVal};// 把js对象转换成json字符串：因为localStorage存储的数据只能是字符串var jsonStr = JSON.stringify(info);// 存放在localStorage中，即设置setItemlocalStorage.setItem('info', jsonStr);// 跳转到首页window.location.href = './03-index.html'}</script>
</body></html>

页面三：首页

组成1：登录

情况1：显示
- 用户没有进行过登录操作时，登录，默认显示
  - 点击登录链接可以跳转到登录页面
情况2：隐藏
- 用户进行过登录操作时，登录，默认隐藏

组成2：欢迎你，XXX

情况1：显示
- 用户进行过登录操作时，欢迎你XXX ，默认显示
- 修改欢迎你后面的值
  - 操作1：获取到本地存储info的uname
  - 操作2：获取到本地存储info的uname赋值给XXX
情况2：隐藏
- 用户没有进行过登录操作时，欢迎你XXX ，默认隐藏

组成3：退出

情况1：显示
- 用户进行过登录操作时，欢迎你XXX ，默认显示，同时显示退出按钮
- 给退出按钮绑定单击事件
  - 点击退出按钮，删除本地存储的info信息
情况2：隐藏
- 用户没有进行过登录操作时，欢迎你XXX ，默认隐藏，退出按钮按默认隐藏

具体代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首页</title><style>.hidden {display: none;}</style>
</head><body><div class="login"><a href="./01-免登录.html">登录</a></div><div class="hidden"><p>欢迎你,<span id="username">XXX</span></p></div><div><input type="button" name="" id="loginOut" value="退出" class="hidden"></div><script>function toggleLogin() {var infoStr = localStorage.getItem('info');// 如果本地存储有内容if (infoStr != null) {var info = JSON.parse(infoStr);// 修改欢迎你后面的值document.getElementById('username').innerText = info.uname;// 欢迎你XXX显示document.querySelector('.hidden').style.display = 'inline-block';// 登录隐藏document.querySelector('.login').style.display = 'none';// 退出显示document.getElementById('loginOut').style.display = 'inline-block';} else {// 如果本地存储没有内容// 欢迎你XXX隐藏document.querySelector('.hidden').style.display = 'none';// 登录显示document.querySelector('.login').style.display = 'inline-block';// 退出显示document.getElementById('loginOut').style.display = 'none';}}toggleLogin();// 单击退出 ，退出登录document.getElementById('loginOut').onclick = function() {// 删除的应该是info这个键值对  不是infoStrlocalStorage.removeItem('info');// 重新加载页面// location.reload();// 调用切换函数toggleLogin();}</script>
</body></html>

登录、注册相关业务逻辑（模拟登录、注册）-H5本地存储相关推荐

python实现登陆注册跳转_Python模拟登录和登录跳转的参考示例
# coding:utf-8 import urllib import urllib2 import cookielib from bs4 import beautifulsoup # 设置登录url ...
php 模拟登录淘宝taobao阿里妈妈|模拟登录淘宝联盟|curl模拟登录淘宝|模拟登陆淘宝采集数据
php 模拟登录淘宝taobao阿里妈妈|模拟登录淘宝联盟|curl模拟登录淘宝|模拟登陆淘宝采集数据在很多项目中我们可能要采集淘宝会员中心的一些数据.但是程序采集的时候会员中心必须是登录的,这里我 ...
python模拟用户登录注册定义函数user_python模拟登录通达信
用字典比用list 好些 list_user={} cmd=raw_input('输入命令 1 注册 2登录 3 退出:') ##print 'cmd:',cmd,cmd <>3,type ...
注册登陆业务逻辑实现
注册前端 ajax发起请求 ->调用注册接口后端设置路由 <-> controller层后端注册接口的逻辑实现 a. database连接数据库b. model层负责数据库 ...
python模拟登录163邮箱_Python实现模拟登录网易邮箱的方法示例
本文实例讲述了Python实现模拟登录网易邮箱的方法.分享给大家供大家参考,具体如下: #coding:utf-8 import urllib2,urllib import cookielib fro ...
【Python3爬虫】破解时光网登录加密参数并实现模拟登录
一.站点分析 MTime 时光网是一个电影媒体与电商服务平台,而这次做的模拟登录则是依靠其手机端站点,站点地址为:https://m.mtime.cn/#.切换到登录页面,再分别输入账号和错误的密码, ...
python模拟登录网站_Python爬虫之模拟登录wechat
不知何时,微信已经成为我们不可缺少的一部分了,我们的社交圈.关注的新闻或是公众号.还有个人信息或是隐私都被绑定在了一起.既然它这么重要,如果我们可以利用爬虫模拟登录,是不是就意味着我们可以获取这些信息 ...
python模拟登录爬取数据_python 模拟登录爬取淘宝数据
淘宝现在需要登录才能爬取搜索商品,首先在登录页面登录chrome F12 开发者模式抓包登录请求发现有一个post请求,这个就是登录的请求了,看下面的from data 登录信息由from da ...
java登录抓取网页_java模拟登录内部系统抓取网页内容
@Component public class Login extends BaseJobs { SimpleDateFormat sdf = new SimpleDateFormat("y ...

登录、注册相关业务逻辑（模拟登录、注册）-H5本地存储

登录相关业务逻辑（模拟登录、注册）

业务逻辑思维导图

页面一：注册

组成1：用户名

组成2：用户密码

组成3：确认密码

组成4：注册按钮

给注册按钮绑定单击事件

页面二：登录

组成1：用户名

组成2：密码

组成3：登录按钮

免登录：

给登录按钮绑定单击事件

页面三：首页

组成1：登录

组成2：欢迎你，XXX

组成3：退出

登录、注册相关业务逻辑（模拟登录、注册）-H5本地存储相关推荐

最新文章

热门文章