主页 / 网络编程 /

jQuery实现的记住帐号密码功能完整示例

网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要介绍了jQuery实现的记住帐号密码功能,结合完整实例形式分析了jQuery使用jquery.cookie.js插件记录用户信息相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现的记住帐号密码功能。分享给大家供大家参考，具体如下

记住密码是每个有帐号登录的网站必备的，现在说一下通过COOKIE实现的记住密码功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>COOKIE</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss./jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss./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代码运行工具测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：vue.js实现数据库的JSON数据输出渲染到html页面功能 下一篇：小程序中英文混合排序问题解决

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by