使用localStorage实现注册和登录验证功能

**

今天来用HTML5的localStorage本地存储实现一个注册和登录功能,注册的用户可以保存到网站中,没有注册的用户则无法登录。注册时如果有重名时则不能注册,必须使用一个新的用户名,密码可以重复。

**

还是先看看效果图吧
使用localStorage实现注册和登录验证功能_第1张图片
使用localStorage实现注册和登录验证功能_第2张图片

完整代码

代码里注释写得也很清楚了,这里我就不分析了。

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>
        body{background-image: url('./bg.jpg');background-size: cover;}
        div{width: 346px;box-sizing: border-box;padding: 15px;background-color: hotpink;text-align: center;margin: 200px auto;opacity: 0.82;border-radius: 10px;}
        #register{display: none;}
        input{margin-bottom: 15px;}
    style>
head>
<body>
    <div id="login">
        <label for="username">用户名:label><input type="text" id="logUN"><br>
        <label for="password">密    码:label><input type="password" id="logPW"><br>
        <button onclick="log()">登录button>
        <button onclick="changeRegister()">免费注册button>
    div>
    <div id="register">
        <label for="username">用户名:label><input type="text" id="regUN"><br>
        <label for="password">密    码:label><input type="password" id="regPW"><br>
        <button onclick="reg()">注册button>
    div>
    <script>
        const login = document.getElementById('login');
        const register = document.getElementById('register');
        
        //免费注册按钮按钮
        function changeRegister() {
            login.style.display = "none";
            register.style.display = "block";
        }
            
        //登录方法
        function log() {
            let logUN = document.getElementById('logUN').value;
            let logPW = document.getElementById('logPW').value;
            //判断用户是否输入数据
            if(logUN === "" && logPW === "") {
                alert("亲!请输入用户名或密码");
            } else {
                //判断用户名是否已经注册
                if(logUN in localStorage) {
                    //如果已经注册,获取用户密码
                    let password = localStorage[logUN];
                    //判断用户输入的密码和 注册的密码是否一致
                    if(logPW === password) {
                        alert("登录成功!");
                        document.getElementById('logUN').value = "";
                        document.getElementById('logPW').value = "";
                    } else {
                        alert("密码错误");
                    }
                } else {
                    alert("用户不存在,请先注册!");
                }
            }
        }

        //注册方法
        function reg() {
            let username = document.getElementById('regUN').value;
            let password = document.getElementById('regPW').value;
            if(username === "" && password === "") {
                alert("亲!请输入用户名或密码");
            } else {
                //判断用户名是否已经存在
                if(username in localStorage){
                    alert("哎呀!用户已经存在了,换一个试试把~~");
                    document.getElementById('regUN').value = "";
                    document.getElementById('regPW').value = "";
                } else {
                    //如果不存在,则将用户名和密码存到网页中
                    localStorage.setItem(username,password);
                    alert("注册成功!!");
                    //注册成功,隐藏注册页面,显示登录界面
                    register.style.display = "none";
                    login.style.display = "block";
                }
            } 
        }  
    script>
body>
html>

你可能感兴趣的:(javascript,html,javascript,html5)