js中的cookie基础封装和ajax的cookie完整封装以及实现7天免登陆效果

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

原创最新推荐文章于 2022-04-13 17:13:21 发布 · 815 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#cookie #免登陆 #ajax封装

JavaScript 同时被 3 个专栏收录

39 篇文章

订阅专栏

HTML

30 篇文章

订阅专栏

CSS

25 篇文章

订阅专栏

本文介绍了一种利用cookie实现七天免登陆功能的方法，通过设置和读取cookie来保存用户信息，同时提供了cookie的基本封装函数，包括设置、获取和删除cookie的功能。文章还展示了如何使用md5加密密码，确保用户信息安全。

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

免登陆效果，主要是浏览器中cookie的作用，可以设置保存数据到本地，从而实现记住密码，免登陆
1.cookie的基础封装，面试经常考这个。

function setCookie(key,value,n){//cookie添加函数
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+n);
	//value = encodeURIComponent(value);转化编码格式
	document.cookie = key + "=" + value +";expires="+oDate;
}
function getCookie(key){//查询cookie的值的函数
	var arr = document.cookie.split("; ");
	for(let i = 0;i < arr.length;i++){
		var arr1 = arr[i].split("=");
		if(arr1[0] === key){
			//return decodeURIComponent(arr1[1]);//解码
			return arr1[1];
		}
	}
	
}
function removeCookie(name){//删除cookie函数
	setCookie(name,1,-1);//中间值无所谓，只需保证最后一个为负值
}

2.七天免登陆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script src="cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/blueimp-md5/2.11.0/js/md5.js" type="text/javascript" charset="utf-8"></script>
		用户名:<input type="text" /><br/>
		密    码:<input type="password" /><br/>
		<input type="checkbox" />7天免登陆<br/>
		<input type="button" value="登录" />
		
		<script type="text/javascript">
			var aInput = document.querySelectorAll("input");
			
			if(getCookie("username")!==undefined){
				aInput[0].value = getCookie("username");
				aInput[1].value = getCookie("password");
				aInput[2].checked = true;
			}
			
			aInput[3].onclick = function(){
				if(aInput[2].checked){
					var val1 = aInput[0].value;
					var val2 = aInput[1].value;
					setCookie("username",val1,7);
					setCookie("password",md5(val2),7);
				}else{
					removeCookie("username");
					removeCookie("password");
				}
				
			}
		</script>
	</body>
</html>

调用时候注意路径就好了，
下面是ajax的cookie完整封装
cookie01.js

/*
 params
 * type:请求方法get/post
 * url:资源路径
 * data:向服务器传的参数（数据）
 * {username:"admin",password:1111}=>"username=admin&password=1111"
 * fnSuc:服务器响应成功时,前端需要执行的回调函数
 * */
//四个属性以对象的形式传入
function ajax(obj){
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");

//将数据的形式转化为form表单传输的数据形式
//{username:"admin",password:1111}=>"username=admin&password=1111"
	var str = '';
	for(var i in obj.data){
		str += i + "=" + obj.data[i] + "&";
	}
//去掉&
	str = str.replace(/&$/,"");
//get的形式
	if(obj.type.toLowerCase()=="get"){
		if(str==""){
			xhr.open(obj.type,obj.url,true);
		}else{
			xhr.open(obj.type,obj.url + "?" +str,true);
		}
		xhr.send();
	}
//post的形式
	if(obj.type.toLowerCase()=="post"){
		xhr.open(obj.type,obj.url,true);
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send(str);
	}

	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var data = xhr.responseText;
				obj.fnSuc(data);
			}
		}
	}
}