实现效果：
用户打开页面，输入用户名和密码后点击登录，如果不勾选“七天免登录”框，则浏览器不会保存用户数据，反之则会保存用户数据，再次刷新之后浏览器会自动写入用户名以及密码。
HTML布局：
<body>
用户名：<input type="text" / id="dx"><br>
密码：<input type="password" / id="pas"><br>
7天免登录<input type="checkbox" id="mdl">
<button id="tj">提交</button>
</body>
在开始写功能之前，要记得引入封装好的Cookie文件，方便设置以及调用Cookie。
<script src="functions.js"></script>
开始写功能
JS部分：
准备工作：一个简单的Cookie封装:
// 封装Cookie
// 封装三个函数
// setCookie() -- 创建 Cookie
// getCookie() -- 获取 Cookie
// removeCookie() -- 删除 Cookie
function setCookie(name,value,iDay){ //分别代表cookie名称、cookie值、存储时间
//首先将cookie的格式拼出来
//document.cookie="name=value;expires=date";
//然后name就换为name,vlaue就换为value，至于date就要算出这个日期对象
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+"="+value+"; expires="+oDate;
}
//a=12; b=5; c=8; d=99
function getCookie(name){
//1、先给cookie做一下字符串分割，
var arr=document.cookie.split("; ");//分割后变为数组，a=12 b=5 c=8 d=99
//2、循环数组
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split("="); //根据“=”再次分割
//arr2[0]——》存储的名称 abcd
//arr2[1]——》存储的值 12 5 8 99
if(arr2[0]==name){ //代表找到我想要的东西了
return arr2[1];
}
}
//另一种可能，用户第一次来网站，还没有cookie，所以肯定什么也找不到。所以在循环一次后就直接return 一个字符串，告诉用户什么也没找到。
return "";
}
function removeCookie(name){
//name名称，再随便来个值1，后面的才是重点-1，时间过期了，所以就成为了负值
setCookie(name,1,-1);
}
}
首先要判断当前页面用户有没有保存过Cookie。
如果保存过，则把已经保存好的Cookie写入对应的用户名以及密码框。
如果没有保存过，则写入一个空字符串。
if(getCookie("pas")&&getCookie("name")){ //判断页面是否有对应Cookie
dx.value=getCookie("name"); //有则写入
pas.value=getCookie("pas");
}else{
dx.value=""; //无则写空
pas.value="";
}
判断之后，就该给登陆按钮增加点击事件。
这里是根据用户是否选中“七天免登录”，来决定是否存储用户的数据。
tj.onclick=function(){
if(mdl.checked){ //判断多选框是否选中
setCookie("name",dx.value,7); //如选中则添加Cookie，添加内容为用户输入的密码和用户名
setCookie("pas",pas.value,7);
}else{
removeCookie("name"); //如没选中，则删除掉对应的Cookie
removeCookie("pas");
}
}
写到这里，一个简单的七天免登录就做好了。
人生第一篇博客，心情复杂。欢迎大家指出错误，笔芯。
版权声明：本文为var_Xu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。