这篇文章主要介绍“怎么用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="https://www.maopiaopiao.com">