jQuery实现记住帐号密码功能

最新推荐文章于 2021-03-24 08:58:30 发布

TANKING-

最新推荐文章于 2021-03-24 08:58:30 发布

阅读量1.8k

点赞数 1

分类专栏：前端文章标签：记住密码 jquery

本文链接：https://blog.csdn.net/weixin_39927850/article/details/88366305

版权

前端专栏收录该内容

45 篇文章 3 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>COOKIE</title>
</head>
<body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="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\" onclick=\"uncheck()\" id=\"check1\" checked/>");
    }
});


// 选中记住密码
function check(){
  $("#che").html("<input type=\"checkbox\" onclick=\"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\" onclick=\"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" onclick="check()" id="check1"/></div><br/>

</body>
</html>