cookie实现自动登陆，切换账号功能

最新推荐文章于 2026-04-22 13:22:59 发布

原创最新推荐文章于 2026-04-22 13:22:59 发布 · 2.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

博客内容提及切换账号指向6.html页面，可能与账号切换的操作流程或相关页面跳转有关。

//登陆首页
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		账号：<input type="text" id="userId"/><br />
		密码: <input type="text" id="userPwd"/><br/>
		<input type="button" value="登陆" id="btn" />
		<input type="checkbox" id="ched" />自动登陆
	</body>
</html>
<script>
	
	window.onload=function(){
		let strcookie=document.cookie;
		let arrcookie=strcookie.split("; ");
		for(let i=0;i<arrcookie.length;i++){
			let arrcook=arrcookie[i].split("=");
			if(arrcook[0]==""){
				location.href = "6.html";
			}else{
				location.href ="5.html";
			}
		}
	}
	let oId=document.getElementById("userId");
	let oPwd=document.getElementById("userPwd");
	let oBtn=document.getElementById("btn");
	let oChed=document.getElementById("ched");
	oBtn.onclick=function(){
		//判断是否选中自动登陆
		if(oChed.checked){
			//获取当前时间
			let date=new Date();
		    //改变Date对象的日期setDate, 返回日期getDate() 
			date.setDate(date.getDate()+7);
			//设置有效时间name=xxx;expires=xxx,expires:有效期
			document.cookie="Id="+oId.value+";expires="+date;
			document.cookie="Pwd="+oPwd.value+";expires="+date;
			location.href = "5.html";
		}else{
				document.cookie="Id="+oId.value;
				document.cookie="Pwd="+oPwd.value;
				location.href = "5.html";
		
		}
	}
</script>



//登陆成功之后的跳转页面---》5.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p ><span id="spa"></span>你好</p>
	<input type="button" value="切换其他账号登陆" id="btn"/> 
	</body>
</html>
<script>
	let ospa=document.getElementById("spa");
	let cookieName=null;
	let cookiePwd=null;
	//获取当前浏览器中存在的cookie
	let strcookie=document.cookie;
	let arrcookie=strcookie.split("; ");
	for(let i=0;i<arrcookie.length;i++){
		let arrcook=arrcookie[i].split("=");
		if(arrcook[0]=="Id"){
			//将已存在的cookie的id值付给body里面的span
			ospa.innerHTML=arrcook[1];
		}
	}
	//删除cookie,将cookie里面的键值对设置为"";
	let obtn=document.getElementById("btn");
	obtn.onclick=function(){
	document.cookie="Id=''";
	document.cookie="Pwd=''";
	location.href = "6.html";
	}
</script>

//切换账号 —>6.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		账号：<input type="text" id="userId"/><br />
		密码: <input type="text" id="userPwd"/><br/>
		<input type="button" value="登陆" id="btn" />
		<input type="checkbox" id="ched" />自动登陆
	</body>
</html>
<script>
	let oId=document.getElementById("userId");
	let oPwd=document.getElementById("userPwd");
	let oBtn=document.getElementById("btn");
	let oChed=document.getElementById("ched");
	oBtn.onclick=function(){
		//判断是否选中自动登陆
		if(oChed.checked){
			//获取当前时间
			let date=new Date();
		    //改变Date对象的日期setDate, 返回日期getDate() 
			date.setDate(date.getDate()+7);
			//设置有效时间name=xxx;expires=xxx
			document.cookie="Id="+oId.value+";expires="+date;
			document.cookie="Pwd="+oPwd.value+";expires="+date;
			location.href = "5.html";
		}else{
				document.cookie="Id="+oId.value;
				document.cookie="Pwd="+oPwd.value;
				location.href = "5.html";
		
		}
	}
</script>