关于H5本地存储的内容，登录、注册案例可以很好的运用到相关的内容，此案例掌握的熟练，就可以很好的理解本地存储的内容啦！本文就详细的讲解了登录注册相关的业务逻辑、以及相关页面的源码，大家可以仔细阅读哦！（tips:如果有错误还请各位大佬指正哦！）
业务逻辑思维导图
登录相关业务逻辑.png
页面一：注册
注册页面.png
组成1：用户名
- 正则验证
组成2：用户密码
- 正则验证
组成3：确认密码
- 判断是否与用户密码相等
组成4：注册按钮
-
给注册按钮绑定单击事件
-
- 正则验证
-
（1）验证用户名是否正确
结果一：正确 --》进行下一步：验证密码
-
结果二：不正确
- 提示alert('用户名输入有误！') return
-
（2）验证密码是否正确
结果一：正确 --》进行下一步：判断两次密码是否相等
-
结果二：不正确
- 提示alert('密码输入有误！') return
-
- 验证两次密码是否相等
结果一：相等
-
结果二：不相等
- 提示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>
页面二：登录
登录页面.png
组成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中，即设置setItem
localStorage.setItem('info', jsonStr);
// 跳转到首页
window.location.href = './03-index.html'
}
</script>
</body>
</html>
页面三：首页
首页情况1.png
首页情况2.png
组成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这个键值对 不是infoStr
localStorage.removeItem('info');
// 重新加载页面
// location.reload();
// 调用切换函数
toggleLogin();
}
</script>
</body>
</html>
