路漫漫其修远兮：js的成长经历（二）—— 利用cookie写登录时七天免登录

最新推荐文章于 2022-04-13 17:13:21 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2022-04-13 17:13:21 发布

阅读量280

点赞数 3

文章标签： javaScript cookie web

本文链接：https://blog.csdn.net/qq_42038623/article/details/97927847

版权

利用cookie写登录时七天免登录

什么是cookie

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

而cookie是运行在客户端的，所以可以用JS来设置cookie.

假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？

首先需要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

cookie的设置方法

document.cookie=“name=”+username;
//就是将cookie中的name变量的值赋值为传入的变量usename。

1.js设置cookie的函数封装

function setCookie(name,value,day){
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+ day);
	//将cookie中name的值赋值为value，在cookie中保存该变量的时间值设为oDate
	document.cookie = name + "=" + value + ";expires=" + oDate;
}

2.js读取cookie的函数封装

function getCookie(name){
	var str = document.cookie;
	var arr = str.split("; ");
	//用分割的方法通过name获取name对应的value，最后返回
	for(var i=0;i<arr.length;i++){
		var arr1 = arr[i].split("=");
		if(arr1[0] == name){
			return arr1[1];
		}
	}
}

3.js删除cookie变量的函数封装

function removeCookie(name){
	//删除cookie中的变量就是将保存的时间设置为-1
	setCookie(name,1,-1);
}

使用cookie的封装函数写一个七天免登陆

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		用户名：<input type="text" /><br>
		密码：<input type="password" /><br>
		<label><input type="checkbox"/>七天免登陆</label><br>
		<input type="button" value="登录" />
		<script type="text/javascript">
			//获取input标签数组节点
			var aInput = document.getElementsByTagName("input");
			//如果获取cookie成功，将标签数组中的元素的value值设置为cookie里保存的值
			if(getCookie("username")){				
				aInput[0].value = getCookie("username");
				aInput[1].value = getCookie("password");
			}
			//点击登录按钮时,如果选择了七天免登录,则将该变量的有效时间设置为7天
			aInput[3].onclick = function(){
				var username = aInput[0].value;
				var password = aInput[1].value;
				if(aInput[2].checked){
					setCookie("username",username,7);
					setCookie("password",password,7);
				}
			}
			
			function setCookie(name,value,day){
				var oDate = new Date();
				oDate.setDate(oDate.getDate()+ day);
				//将cookie中name的值赋值为value，在cookie中保存该变量的时间值设为oDate
				document.cookie = name + "=" + value + ";expires=" + oDate;
			}
			
			function getCookie(name){
				var str = document.cookie;
				var arr = str.split("; ");
				//用分割的方法通过name获取name对应的value，最后返回
				for(var i=0;i<arr.length;i++){
					var arr1 = arr[i].split("=");
					if(arr1[0] == name){
						return arr1[1];
					}
				}
			}
			function removeCookie(name){
				//删除cookie中的变量就是将保存的时间设置为-1
				setCookie(name,1,-1);
			}
		</script>
		
	</body>
</html>

结果显示如下：
在这里插入图片描述
如果点击登录时，将七天免登录勾上，则下次刷新页面时，仍然保留上次的用户名和密码。

不愿意做鱼的小鲸鱼

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
路漫漫其修远兮：js的成长经历（二）—— 利用cookie写登录时七天免登录

目录利用cookie写登录时七天免登录什么是cookiecookie的设置方法使用cookie的封装函数写一个七天免登陆利用cookie写登录时七天免登录什么是cookieJavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie.假设有这样一种情况，在某个用例流程...
复制链接

扫一扫