首页 > 编程 > JavaScript > 正文

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

2019-11-19 11:04:53
字体:
来源:转载
供稿:网友

本文实例讲述了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">//读取cookievar 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.VeVB.COm/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery的cookie操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表