温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用jQuery怎么实现一个记住帐号密码功能

发布时间:2021-05-07 16:25:16 来源:亿速云 阅读:217 作者:Leah 栏目:web开发

本篇文章给大家分享的是有关使用jQuery怎么实现一个记住帐号密码功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

记住密码是每个有帐号登录的网站必备的,现在说一下通过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>

使用jQuery怎么实现一个记住帐号密码功能

只要在表单输入帐号密码,再勾选记住密码,那么你的帐号密码就已经被存入到cookie了,有效期7天。然后你刷新页面,发现帐号密码还在表单中,不会被清空。

以上就是使用jQuery怎么实现一个记住帐号密码功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI