怎么用js实现本地持久化存储登录注册
导读：本文共4669字符，通常情况下阅读需要16分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：接下来，请跟着小编一起来学习吧！效果图1.登录html文件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge... ...
目录
(为您整理了一些要点),点击可以直达。接下来，请跟着小编一起来学习吧！
效果图
1.登录html文件
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>登录界面</title>
<style>
.container{
text-align:center;
margin:50pxauto;
width:600px;
height:400px;
background-color:rgb(201,208,247);
box-sizing:border-box;
padding-top:20px;
}
.containerinput{
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>
<divclass="container">
<h3>登录界面</h3>
<inputtype="text"name="loginId"placeholder="登录账号">
<divclass="textloginIdText"></div>
<inputtype="password"name="loginPassword"placeholder="登录密码">
<divclass="textloginPasswordText"></div>
<inputclass="btnloginBtn"type="submit"value="登录">
<inputclass="btnregisterBtn"type="submit"value="注册">
</div>
<scriptsrc="js/login.js"></script>
</body>
</html>
2.注册html文件
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>注册界面</title>
<style>
.container{
text-align:center;
margin:50pxauto;
width:600px;
height:400px;
background-color:rgb(201,208,247);
box-sizing:border-box;
padding-top:20px;
}
.containerinput{
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>
<divclass="container">
<h3>注册界面</h3>
<inputtype="text"name="registerId"placeholder="设置账号">
<divclass="textregisterIdText"></div>
<inputtype="password"name="registerPassword"placeholder="设置密码">
<divclass="textregisterPasswordText"></div>
<inputclass="btn"type="submit"value="注册">
<inputclass="btntoLoginBtn"type="button"value="返回登录">
</div>
<scriptsrc="js/register.js"></script>
</body>
</html>
3.登录界面js文件
constisHaveId=()=>{
letloginId=loginIdEle.value
//遍历存储的信息,如果有id相同的则返回true
letidHave=message.some(item=>loginId==item.id)
//如果结果为true，显示内容为空，否则，显示账号不存在
if(idHave==true){
loginIdText.innerHTML=''
returntrue
}else{
loginIdText.innerHTML='账号不存在！'
returnfalse
}
}
//验证密码
constisHavePassword=()=>{
letloginPassword=loginPasswordEle.value
letpasswordHave=message.some(item=>loginPassword==item.password)
if(passwordHave==false){
loginPasswordText.innerHTML='密码错误！'
returnfalse
}else{
loginPasswordText.innerHTML=''
returntrue
}
}
//点击事件
loginBtn.onclick=function(){
letisEmptyChecjedId=emptyChecjedId()
letisEmptyChecjedPassword=emptyChecjedPassword()
if(!isEmptyChecjedId||!isEmptyChecjedPassword){
return
}
letidHave=isHaveId()
letpasswordHave=isHavePassword()if(!idHave||!passwordHave){
return
}
alert('登录成功！')
loginIdEle.value=''
loginPasswordEle.value=''
}
//焦点事件
loginIdEle.addEventListener('blur',function(){
letisEmptyChecjedId=emptyChecjedId()
if(!isEmptyChecjedId){
return
}
isHaveId()
})
//密码焦点事件
loginPasswordEle.addEventListener('blur',function(){
letisEmptyChecjedPassword=emptyChecjedPassword()
//如果为空，则不进行强度验证，不为空时，再进行强度验证
if(!isEmptyChecjedPassword){
return
}
isHavePassword()
})
//点击注册跳转到注册界面
functiontoRegister(){
consttoRegisterEle=document.querySelector('.registerBtn')
toRegisterEle.onclick=function(){
location.href='./register.html'
}
}
toRegister()
4.注册界面js文件
//获取节点若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
constregisterIdEle=document.querySelector('input[name="registerId"]')
constregisterPasswordEle=document.querySelector('input[name="registerPassword"]')
constregisterBtnEle=document.querySelector('.btn')
constregisterIdText=document.querySelector('.registerIdText')
constregisterPasswordText=document.querySelector('.registerPasswordText')
//账号非空验证
constemptyChecjedId=()=>{
//获取节点内容
letregisterId=registerIdEle.value
if(registerId==''){
registerIdText.innerHTML='用户名不能为空！'
returnfalse
}else{
registerIdText.innerHTML=''
returntrue
}
}
//密码非空验证
constemptyChecjedPassword=()=>{
letregisterPassword=registerPasswordEle.value
if(registerPassword==''){
registerPasswordText.innerHTML='密码不能为空！'
returnfalse
}else{
registerPasswordText.innerHTML=''
returntrue
}
}//密码强度验证
constpasswordDegree=()=>{
letpassword=registerPasswordEle.value
letreg=/^[A-Z][0-9a-zA-Z]{7}/
if(!reg.test(password)){
registerPasswordText.innerHTML='密码必须以大写字母开头，至少8位字母或数字！'
returnfalse
}else{
registerPasswordText.innerHTML=''
returntrue
}
}
//点击事件
registerBtnEle.onclick=function(){
letisEmptyChecjedId=emptyChecjedId()
letisEmptyChecjedPassword=emptyChecjedPassword()
if(!isEmptyChecjedId||!isEmptyChecjedPassword){
return
}
//密码强度
letisPasswordDegree=passwordDegree()
if(!isPasswordDegree){
return
}
alert('注册成功！')
//将数据持久化存储
letmessage={
id:registerIdEle.value,
password:registerPasswordEle.value
}
letmessageStr=localStorage.getItem('userMessage')
letmessages=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(){
letisEmptyChecjedPassword=emptyChecjedPassword()
//如果为空，则不进行强度验证，不为空时，再进行强度验证
if(!isEmptyChecjedPassword){
return
}
passwordDegree()
})
functiontoLogin(){
consttoLoginEle=document.querySelector('.toLoginBtn')
toLoginEle.onclick=function(){
location.href='./login.html'
}
}
toLogin()
怎么用js实现本地持久化存储登录注册的详细内容，希望对您有所帮助，信息来源于网络。