<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
用户名:<input type="text"><br/>
密 码:<input type="password"><br/>
<input type="checkbox">七天免登陆
<input type="button" value="登录">
<script type="text/javascript">
//获取到所有的input元素
var aInput = document.getElementsByTagName("input");
//在进入页面的时候就开始判断cookie中是否有username,如果有,直接将用户名和对应的密码填入对应位置
if(getCookie("username")){
aInput[0].value = getCookie("username");
aInput[1].value= getCookie("password");
//console.log(aInput[0].value,aInput[1].value);
}
//在点击登录按钮时判断是否选择了七天免登陆复选框,如果选择,就将用户名和密码创建cookie保存
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);
}
}
//创建cookie函数,传入的参数为cookie名,cookie值,以及该cookie有效期
function setCookie(name,value,day){
//创建一个系统时间
var oDate = new Date();
//设置cookie的有效期为当前日期+day
oDate.setDate(oDate.getDate() + day);
document.cookie = name + "=" + value + ";expires=" + oDate;
}
//获取cookie函数
function getCookie(name){
//获取页面所有cookie,根据页面cookie格式将cookie用; 分割开(必须是; 因为document.cookie输出的格式就是; 只是;隔开会出错)
console.log(document.cookie);
var cookieArray1 = document.cookie.split("; ");
//遍历所有的cookies查找是否有cookie名为name的,有则返回其对应的value
for(var i = 0 ;i< cookieArray1.length;i++){
//每个cookie都是name = value的格式;所以用=将每个cookie分割开从而方便获取name和传入的参数对比,以便找到对应的value
var cookie1 = cookieArray1[i].split("=");
if(cookie1[0] == name){
return cookie1[1];
}
}
}
function removeCookie(name){
setCookie(name,1,-1);
}
</script>
</body>
</html>
版权声明:本文为qq_39305143原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。