admin 管理员组文章数量: 1087748
使用Cookie实现七天免登录
实现效果：
用户打开页面，输入用户名和密码后点击登录，如果不勾选“七天免登录”框，则浏览器不会保存用户数据，反之则会保存用户数据，再次刷新之后浏览器会自动写入用户名以及密码。
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 99if(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")){ //判断页面是否有对应Cookiedx.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"); //如没选中，则删除掉对应的CookieremoveCookie("pas");}
}
写到这里，一个简单的七天免登录就做好了。
人生第一篇博客，心情复杂。欢迎大家指出错误，笔芯。
本文标签： 使用Cookie实现七天免登录
版权声明：本文标题：使用Cookie实现七天免登录 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700276062a375844.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论