本地存储模拟登录

最新推荐文章于 2024-09-06 22:20:29 发布

Carzy man

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量970

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/ab_15/article/details/124269857

版权

<!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>Document</title>
</head>

<body>
    <label for="">用户名：</label>
    <input type="text" name="" id="useName" placeholder="请输入用户名"><br>
    <label for="">密码：</label>
    <input type="password" name="" id="usePwd" placeholder="请输入密码"><br>
    <input type="button" value="登录" class="login">
    <input type="button" value="注册" class="add">
</body>
<script>
    //获取用户名
    let userName = document.querySelector('#useName')
    //获取密码
    let userPwd = document.querySelector('#usePwd')

    //注册按钮
    const add = document.querySelector('.add')
    const login = document.querySelector('.login')


    add.onclick = () => {
        let UserInfo = JSON.parse(localStorage.getItem('items')) || []
        let user = {
            Uname: userName.value,
            Upwd: userPwd.value
        }
      
        let index = UserInfo.findIndex(res => {
            return res.Uname == userName.value
        })
        if(index !== -1) {
            alert('该用户已经注册')
            return
        } else{
            UserInfo.push(user)
        localStorage.setItem('items', JSON.stringify(UserInfo))

        alert('注册成功')
        }
    }

        login.onclick = () => {
        let uname = userName.value
        let pwd = userPwd.value
        let items = JSON.parse(localStorage.getItem('items')) || []
        console.log(items);
        let index = items.findIndex(res => {
            return res.Uname == uname
            console.log(res);
        })
        if (index == -1) {
            alert('用户没有注册')
            return
        }
        if (items[index].Upwd == pwd) {
          

            localStorage.setItem('id',JSON.stringify(items[index]))
            alert('登录成功')
            location.assign('2.html')
        } else {
            alert('登录失败')
        }

    }
</script>

</html>

Carzy man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储模拟登录

<!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>D.
复制链接

扫一扫