cookie实现页面保持登录案例

迷南。 2021-07-24 12:55 510阅读 0赞

后台设置cookie写入，前台读取写入的cookie到页面,穿插js判断

前台：

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	
    	<style>
    	.dl{ 
    		border:solid 1px black;
    		width:300px;
    	}
    	.dl2{ 
    		
    		border:solid 1px black;
    		width:300px;
    		display: none;
    	}
    	.uname{ 
    		font-size: 30px;
    		color:green;
    		font-weight: bolder;
    	}	
    	</style>
    	
    	
    </head>
    <body>
      	<div class='dl'>
      		用户名:<input type="text" class='un'><br>
    		密码:<input type="text" class='up'><br>
    		<button>登录</button></div>
    
      	<div class='dl2'>
      		<span>欢迎回来,尊敬的:</span><span class='uname'>哈哈哈</span>
      	</div>
    	<script>
    
    	(function(){ 
    		var btn=document.querySelector('button');
    		var div1=document.querySelector('.dl');
    		var unInput=document.querySelector('.un');
    		var upInput=document.querySelector('.up');
    		var wel=document.querySelector('.uname');
    		var div2=document.querySelector('.dl2');
    
    		//读取cookie内容
    		var cookieArr=document.cookie.split(';');
    		var obj={ };
    	
    		for(var i=0;i<cookieArr.length;i++)
    		{ 
    			 var tempArr=cookieArr[i].trim().split('=');
    			 obj[tempArr[0]]=tempArr[1];
    		}
    		//判断cookie内容，有值表示已经登陆过
    		if(obj['uname2'].length!=0)
    		{ 
    			btn.parentNode.style.display='none';
    			div2.style.display='block';
    			wel.innerHTML=obj.uname2;
    		}
    		
    		//注销操作即删除cookie,并将页面变回未登录状态
    
    		
    		btn.onclick=function()
    		{ 
    			
    
    			var xhr=new XMLHttpRequest();
    			xhr.onreadystatechange=function(){ 
    
    				if(xhr.readyState==4)
    				{ 
    					if(xhr.status==200)
    					{ 
    						var obj=JSON.parse(xhr.responseText);
    						if(obj.code==1)
    						{ 
    							 btn.parentNode.style.display='none';
    							div2.style.display='block';
    							wel.innerHTML=obj.uname;
    						}
    					}
    				}
    			}
    			var data=new FormData();
    			data.append('uname',unInput.value);
    			data.append('upwd',upInput.value);
    
    			xhr.open('post','6.php',true);
    			xhr.send(data);
    		}
    
    	})()
    	</script>
    	
    </body>
    
    </html>

php后台:

<?php
    
    	$uname=$_POST['uname'];
    	$upwd=$_POST['upwd'];
    
    //登录成功添加cookie
    	setcookie('uname2','mark',time()+3600*24);
    //登录成功状态码0失败,1成功
    	$success['code']=1;
    	$success['uname']=$uname;
    	
    	echo json_encode($success);
    
    
    
    ?>