本文实例为大家分享了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">
? ? ? ? <h2>登录界面</h2>
? ? ? ? <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">
? ? ? ? <h2>注册界面</h2>
? ? ? ? <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()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did121506