本文实例讲述了jQuery实现的记住帐号密码功能。分享给大家供大家参考，具体如下：
记住密码是每个有帐号登录的网站必备的，现在说一下通过COOKIE实现的记住密码功能。
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>COOKIE</title>
</head>
<body>
<script type=\"text/javascript\" src=\"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js\"></script>
<script type=\"text/javascript\">
//读取cookie
var user = $.cookie(\'uu\');
var pwd = $.cookie(\'pp\');
$(document).ready(function(){
// 判断是否存在cookie
if (user) {
$(\"input:text\").val(user);
$(\"input:password\").val(pwd);
$(\"#che\").html(\"<input type=\\\"checkbox\\\" οnclick=\\\"uncheck()\\\" id=\\\"check1\\\" checked/>\");
}
});
// 选中记住密码
function check(){
$(\"#che\").html(\"<input type=\\\"checkbox\\\" οnclick=\\\"uncheck()\\\" id=\\\"check1\\\"/>\");
// 设置为选中状态
document.getElementById(\"check1\").checked=true;
// 创建一个cookie并设置有效时间为 7天
$.cookie(\'uu\', $(\"input:text\").val(), { expires: 7 });
$.cookie(\'pp\', $(\"input:password\").val(), { expires: 7 });
}
// 取消记住密码
function uncheck(){
$(\"#che\").html(\"<input type=\\\"checkbox\\\" οnclick=\\\"check()\\\" id=\\\"check1\\\"/>\");
// 设置为取消状态
document.getElementById(\"check1\").checked=false;
// 删除cookie
$.cookie(\'uu\',\'\');
$.cookie(\'pp\',\'\');
}
</script>
<input type=\"text\" name=\"username\" placeholder=\"帐号\"><br/>
<input type=\"password\" name=\"password\" placeholder=\"密码\"><br/>
记住密码：<div id=\"che\"><input type=\"checkbox\" οnclick=\"check()\" id=\"check1\"/></div><br/>
</body>
</html>
只要在表单输入帐号密码，再勾选记住密码，那么你的帐号密码就已经被存入到cookie了，有效期7天。然后你刷新页面，发现帐号密码还在表单中，不会被清空。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.freexyz.cn/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery的cookie操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
© 版权声明
THE END
暂无评论内容