这篇文章主要介绍“怎么用js实现本地持久化存储登录注册”，在日常操作中，相信很多人在怎么用js实现本地持久化存储登录注册问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用js实现本地持久化存储登录注册”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
效果图
1.登录html文件
<!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>
.container {
text-align: center;
margin: 50px auto;
width: 600px;
height: 400px;
background-color: rgb(201, 208, 247);
box-sizing: border-box;
padding-top: 20px;
}
.container input {
width: 400px;
height: 30px;
border: none;
list-style: none;
}
.container .btn {
width: 404px;
height: 35px;
margin-top: 10px;
border: none;
background-color: deepskyblue;
color: white;
border-radius: 5px;
cursor: pointer;
}
.container .text {
margin-top: 10px;
height: 20px;
width: 400px;
font-size: 12px;
color: tomato;
}
</style>
</head>
<body>
<div class="container">
<h3>登录界面</h3>
<input type="text" name="loginId" placeholder="登录账号">
<div class="text loginIdText"></div>
<input type="password" name="loginPassword" placeholder="登录密码">
<div class="text loginPasswordText"></div>
<input class="btn loginBtn" type="submit" value="登录">
<input class="btn registerBtn" type="submit" value="注册">
</div>
<script src="js/login.js"></script>
</body>
</html>2.注册html文件
<!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>
.container{
text-align: center;
margin: 50px auto;
width: 600px;
height: 400px;
background-color: rgb(201, 208, 247);
box-sizing: border-box;
padding-top: 20px;
}
.container input{
width: 400px;
height: 30px;
border: none;
list-style: none;
}
.container .btn{
width: 404px;
height: 35px;
margin-top: 10px;
border: none;
background-color: deepskyblue;
color: white;
border-radius: 5px;
cursor: pointer;
}
.container .text{
margin-top: 10px;
height: 20px;
width: 400px;
font-size: 12px;
color: tomato;
}
</style>
</head>
<body>
<div class="container">
<h3>注册界面</h3>
<input type="text" name="registerId" placeholder="设置账号">
<div class="text registerIdText"></div>
<input type="password" name="registerPassword" placeholder="设置密码">
<div class="text registerPasswordText" ></div>
<input class="btn" type="submit" value="注册">
<input class="btn toLoginBtn" type="button" value="返回登录">
</div>
<script src="js/register.js"></script>
</body>
</html>3.登录界面js文件
const isHaveId = () => {
let loginId = loginIdEle.value
//遍历存储的信息,如果有id相同的则返回true
let idHave=message.some(item => loginId == item.id)
//如果结果为true，显示内容为空，否则，显示账号不存在
if (idHave==true) {
loginIdText.innerHTML = ''
return true
} else {
loginIdText.innerHTML = '账号不存在！'
return false
}
}
//验证密码
const isHavePassword = () => {
let loginPassword = loginPasswordEle.value
let passwordHave=message.some(item =>loginPassword == item.password )
if (passwordHave==false) {
loginPasswordText.innerHTML = '密码错误！'
return false
} else {
loginPasswordText.innerHTML = ''
return true
}
}
//点击事件
loginBtn.onclick = function () {
let isEmptyChecjedId = emptyChecjedId()
let isEmptyChecjedPassword = emptyChecjedPassword()
if (!isEmptyChecjedId || !isEmptyChecjedPassword) {
return
}
let idHave = isHaveId()
let passwordHave = isHavePassword()
if (!idHave ||!passwordHave ) {
return
}
alert('登录成功！')
loginIdEle.value = ''
loginPasswordEle.value = ''
}
//焦点事件
loginIdEle.addEventListener('blur', function () {
let isEmptyChecjedId = emptyChecjedId()
if (!isEmptyChecjedId) {
return
}
isHaveId()
})
//密码焦点事件
loginPasswordEle.addEventListener('blur', function () {
let isEmptyChecjedPassword = emptyChecjedPassword()
//如果为空，则不进行强度验证，不为空时，再进行强度验证
if (!isEmptyChecjedPassword) {
return
}
isHavePassword()
})
//点击注册跳转到注册界面
function toRegister() {
const toRegisterEle = document.querySelector('.registerBtn')
toRegisterEle.onclick = function () {
location.href = './register.html'
}
}
toRegister()4.注册界面js文件
//获取节点
const registerIdEle = document.querySelector('input[name="registerId"]')
const registerPasswordEle = document.querySelector('input[name="registerPassword"]')
const registerBtnEle = document.querySelector('.btn')
const registerIdText=document.querySelector('.registerIdText')
const registerPasswordText=document.querySelector('.registerPasswordText')
//账号非空验证
const emptyChecjedId = () => {
//获取节点内容
let registerId = registerIdEle.value
if (registerId == '') {
registerIdText.innerHTML = '用户名不能为空！'
return false
} else {
registerIdText.innerHTML = ''
return true
}
}
//密码非空验证
const emptyChecjedPassword=()=>{
let registerPassword = registerPasswordEle.value
if(registerPassword==''){
registerPasswordText.innerHTML='密码不能为空！'
return false
}else{
registerPasswordText.innerHTML=''
return true
}
}
//密码强度验证
const passwordDegree = () => {
let password = registerPasswordEle.value
let reg = /^[A-Z][0-9a-zA-Z]{7}/
if (!reg.test(password)) {
registerPasswordText.innerHTML = '密码必须以大写字母开头，至少8位字母或数字！'
return false
} else {
registerPasswordText.innerHTML = ''
return true
}
}
//点击事件
registerBtnEle.onclick=function(){
let isEmptyChecjedId=emptyChecjedId()
let isEmptyChecjedPassword=emptyChecjedPassword()
if(!isEmptyChecjedId||!isEmptyChecjedPassword){
return
}
//密码强度
let isPasswordDegree=passwordDegree()
if(!isPasswordDegree){
return
}
alert('注册成功！')
//将数据持久化存储
let message={
id:registerIdEle.value,
password:registerPasswordEle.value
}
let messageStr=localStorage.getItem('userMessage')
let messages=JSON.parse(messageStr) ||[]
messages.push(message)
localStorage.setItem('userMessage',JSON.stringify(messages))
registerIdEle.value=''
registerPasswordEle.value=''
}
//焦点事件
registerIdEle.addEventListener('blur', function () {
emptyChecjedId()
})
//密码焦点事件
registerPasswordEle.addEventListener('blur', function () {
let isEmptyChecjedPassword=emptyChecjedPassword()
//如果为空，则不进行强度验证，不为空时，再进行强度验证
if (!isEmptyChecjedPassword) {
return
}
passwordDegree()
})
function toLogin(){
const toLoginEle=document.querySelector('.toLoginBtn')
toLoginEle.onclick=function(){
location.href='./login.html'
}
}
toLogin()到此，关于“怎么用js实现本地持久化存储登录注册”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
