JS 中操作Cookies-优快云博客

本文介绍了一种在浏览器端实现Cookie的方法，包括如何设置、获取及验证Cookie。通过具体的JavaScript代码示例，展示了如何利用Cookie实现用户登录状态的保存与读取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<html>
	<head>
		<title> 浏览器端Cookie Demo </title>
		<script language="javascript">

			var flag = true; //假设用户已经登陆过 Cookie信息仍然存在

			//设置浏览器端Cookie信息
			function setCookie(key,value,minute){
				var dt = new Date();  //当前时间
				dt.setMinutes(dt.getMinutes()+minute); //当期分钟加上要保留的分钟数
				document.cookie = key+"="+escape(value)+";expires="+dt.toGMTString();
			}

			//得到Cookie
			function getUserCookie(userName){
				//浏览器端的cookie长度
				if(document.cookie.length>0){
					//通过用户名找到cookie键值对位置 例如 name=simon
					var startindex =  document.cookie.indexOf(userName+"=");  //起始位置
					var endindex ;  //cookie字符串结束位置
					if(startindex!=-1){
						startindex = startindex+userName.length+1;  //等号后的字符串为用户名称
						endindex = document.cookie.indexOf(";",startindex); //分号结束

						if(endindex==-1){  //如果没有分号 就是一个cookie
							endindex = document.cookie.length;
						}
						//取得cookie字符串 并且实施解码
						var name = unescape(document.cookie.substring(startindex,endindex));
						return name;
					}
				}else{
					return "";
				}
			}
			//检查这个用户以前是否登录过
			function checkLoginUser(){
				var userName = getUserCookie('loginname'); //查询浏览器端是否存储 loginname这个cookie键
				var objLbl = document.getElementById("lblInfo");
				//对象存在 且不为空
				if(userName!=null && userName!=""){
					flag = true;
					objLbl.innerHTML="<font color='red'>"+userName+",欢迎回来！</font>";
				}else{
					flag = false;
					objLbl.innerHTML="<font color='red'>请用户登录 !</font>";
				}
			}

			//登录验证并保存cookie信息
			function loginSite(){
				if(flag){  
					return;
				}else{
					var objName = document.getElementById("name");
					var objPwd = document.getElementById("password");
					if(objName.value!="simon" && objPwd.value!="simon"){
						alert("用户或密码不正确！");
					}else{
						//设置Cookie
						setCookie("loginname",objName.value,1);  //1分钟
						alert("登录成功");

					}
				}
			}


		</script>
	</head>
<body onLoad="checkLoginUser()">
	<form action="#" method="post" >

		<label id="lblInfo">请用户登录 !</label>
		Name: <input type="text" id="name" >  
		Password: <input type="password" id="password">
		<input type="button" value="Login in" onClick="loginSite()"> 
	</form>
</body>
</html>