溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么用js實(shí)現(xiàn)本地持久化存儲登錄注冊

發(fā)布時(shí)間：2022-08-25 14:46:02 來源：億速云 閱讀：125 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“怎么用js實(shí)現(xiàn)本地持久化存儲登錄注冊”，在日常操作中，相信很多人在怎么用js實(shí)現(xiàn)本地持久化存儲登錄注冊問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用js實(shí)現(xiàn)本地持久化存儲登錄注冊”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

效果圖

怎么用js實(shí)現(xiàn)本地持久化存儲登錄注冊

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="設(shè)置賬號">
        <div class="text registerIdText"></div>
        <input type="password" name="registerPassword" placeholder="設(shè)置密碼">
        <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)
    //如果結(jié)果為true，顯示內(nèi)容為空，否則，顯示賬號不存在
    if (idHave==true) {
        loginIdText.innerHTML = ''
        return true
    } else {
        loginIdText.innerHTML = '賬號不存在！'
        return false
    }
}
//驗(yàn)證密碼
const isHavePassword = () => {
    let loginPassword = loginPasswordEle.value
    let passwordHave=message.some(item =>loginPassword == item.password )
        if (passwordHave==false) {
            loginPasswordText.innerHTML = '密碼錯(cuò)誤！'
            return false
        } else {
            loginPasswordText.innerHTML = ''
            return true
        }
}
//點(diǎn)擊事件
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 = ''
}
 
//焦點(diǎn)事件
loginIdEle.addEventListener('blur', function () {
    let isEmptyChecjedId = emptyChecjedId()
    if (!isEmptyChecjedId) {
        return
    }
    isHaveId()
 
})
//密碼焦點(diǎn)事件
loginPasswordEle.addEventListener('blur', function () {
    let isEmptyChecjedPassword = emptyChecjedPassword()
    //如果為空，則不進(jìn)行強(qiáng)度驗(yàn)證，不為空時(shí)，再進(jìn)行強(qiáng)度驗(yàn)證
    if (!isEmptyChecjedPassword) {
        return
    }
    isHavePassword()
})
//點(diǎn)擊注冊跳轉(zhuǎn)到注冊界面
function toRegister() {
    const toRegisterEle = document.querySelector('.registerBtn')
    toRegisterEle.onclick = function () {
        location.href = './register.html'
    }
}
toRegister()

4.注冊界面js文件

//獲取節(jié)點(diǎn)
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')
//賬號非空驗(yàn)證
const emptyChecjedId = () => {
    //獲取節(jié)點(diǎn)內(nèi)容
    let registerId = registerIdEle.value
    if (registerId == '') {
        registerIdText.innerHTML = '用戶名不能為空！'
        return false
    } else {
        registerIdText.innerHTML = ''
        return true
    }
}
//密碼非空驗(yàn)證
const emptyChecjedPassword=()=>{
    let registerPassword = registerPasswordEle.value
    if(registerPassword==''){
        registerPasswordText.innerHTML='密碼不能為空！'
        return false
    }else{
        registerPasswordText.innerHTML=''
        return true
    }
}
 
//密碼強(qiáng)度驗(yàn)證
const passwordDegree = () => {
    let password = registerPasswordEle.value
    let reg = /^[A-Z][0-9a-zA-Z]{7}/
    if (!reg.test(password)) {
        registerPasswordText.innerHTML = '密碼必須以大寫字母開頭，至少8位字母或數(shù)字！'
        return false
    } else {
        registerPasswordText.innerHTML = ''
        return true
    }
}
//點(diǎn)擊事件
registerBtnEle.onclick=function(){
    let isEmptyChecjedId=emptyChecjedId()
    let isEmptyChecjedPassword=emptyChecjedPassword()
    if(!isEmptyChecjedId||!isEmptyChecjedPassword){
        return
    }
    //密碼強(qiáng)度
    let isPasswordDegree=passwordDegree()
    if(!isPasswordDegree){
        return
    }
    alert('注冊成功！')
    //將數(shù)據(jù)持久化存儲
    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=''
}
//焦點(diǎn)事件
registerIdEle.addEventListener('blur', function () {
    emptyChecjedId()
})
//密碼焦點(diǎn)事件
registerPasswordEle.addEventListener('blur', function () {
    let isEmptyChecjedPassword=emptyChecjedPassword()
    //如果為空，則不進(jìn)行強(qiáng)度驗(yàn)證，不為空時(shí)，再進(jìn)行強(qiáng)度驗(yàn)證
    if (!isEmptyChecjedPassword) {
        return
    }
    passwordDegree()
})
function toLogin(){
    const toLoginEle=document.querySelector('.toLoginBtn')
    toLoginEle.onclick=function(){
        location.href='./login.html'
    }
}
toLogin()

到此，關(guān)于“怎么用js實(shí)現(xiàn)本地持久化存儲登錄注冊”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手