cookie登录案例练习

.loginRegistDiv {
            text-align: center;
            padding: 15px;
            border: 1px solid black;
            width: 300px;
            min-height: 30px;
        }
        
        .welcomeDiv {
            text-align: center;
            padding: 15px;
            border: 1px solid black;
            width: 300px;
            min-height: 30px;
            display: none;
        }
        
        .nickNameSpan {
            color: green;
            font-size: 22px;
            font-weight: bold;
        }

 <div class="loginRegistDiv">
        <label for="userName">
        <span>用户名:</span><input type="text" id="userName" placeholder='请输入用户名'>
    </label><br/>
        <label for="password">
        <span>密&nbsp;&nbsp;&nbsp;码:</span><input type="text" id="password" placeholder='请输入密码'>
    </label><br/><br/>
        <button class="loginBtn">登录</button>
        <button class="registBtn">注册</button>
    </div>
    <div class="welcomeDiv">
        欢迎回来，尊敬的：
        <span class='nickNameSpan'>哈哈哈</span>
        <br/><br/>
        <button class="exitBtn">注销登录</button>
    </div>

<script>
        //页面逻辑
        ;
        (function() {
            var loginBtn = document.querySelector('.loginBtn');
            var userNameInput = document.querySelector('#userName');
            var passwordInput = document.querySelector('#password');
            var welcomeDiv = document.querySelector('.welcomeDiv');
            var loginRegistDiv = document.querySelector('.loginRegistDiv');
            var nickNameSpan = document.querySelector('.nickNameSpan');
            var exitBtn = document.querySelector('.exitBtn');

            //表示一个自动登录的功能  
            function getCookie() {
                //获得cookie
                var cookie = document.cookie;
                // 分割成数组
                var cookieArr = cookie.split(';');
                var finalObj = {};
                // 循环遍历，并存入对象
                for (var i = 0; i < cookieArr.length; i++) {
                    var tempArr = cookieArr[i].trim().split('=');
                    finalObj[tempArr[0]] = tempArr[1];
                }
                return finalObj;
            }

            var cookieObj = getCookie();
            if (cookieObj.nickName != undefined) {
                if (cookieObj.nickName.length != 0) {
                    loginRegistDiv.style.display = 'none';
                    welcomeDiv.style.display = 'block';
                    nickNameSpan.innerHTML = cookieObj.nickName;
                }
            }

            // 发送Ajax请求
            loginBtn.onclick = function() {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            // 解析
                            var data = JSON.parse(xhr.responseText);
                            // 成功后
                            if (data.loginStatusCode == 1) {
                                loginRegistDiv.style.display = 'none';
                                welcomeDiv.style.display = 'block';
                                nickNameSpan.innerHTML = data.nickName;
                            }
                        }
                    }
                };

                // 采用表单验证方式
                var formData = new FormData();
                formData.append('uname', userNameInput.value);
                formData.append('upass', passwordInput.value);
                xhr.open('post', '07cookie案例后台.php', true);
                xhr.send(formData);
            }

            //退出登录按钮
            exitBtn.onclick = function() {
                // 清空
                userNameInput.value = '';
                passwordInput.value = '';
                // 切换显示隐藏状态
                loginRegistDiv.style.display = 'block';
                welcomeDiv.style.display = 'none';
                //清除cookie
                var expires = new Date(new Date().getTime() + 1).toGMTString();
                document.cookie = 'nickName=beixi;expires=' + expires;
            }
        })();
    </script>

这里关于php如何连接和操作数据库，可以参考：PHP连接MySQL数据库

<?php
 $success=array('msg'=>'ok');
  $userName=$_POST['uname'];
  $password=$_POST['upass'];

  /*
     假设经过了数据库的处理
     假设已经认证登录成功，需要添加cookie
  */

  //登录成功之后对页面添加cookie
  setcookie('nickName','beixi',time()+3600*24);

  //回馈前端表示登录成功，使用状态码loginStatusCode   0表示失败  1表示成功
  $success['loginStatusCode']=1;
  $success['nickName']='beixi';

 echo  json_encode($success);
?>

当点击“登录”按钮后：

 

 

 

当点击“注销登录”按钮后：