免登陆效果,主要是浏览器中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);
}
}
}
}