快捷導(dǎo)航

jQuery實現(xiàn)的記住帳號密碼功能完整示例

更新時間：2019年08月03日 09:23:08 作者：TANKING-

這篇文章主要介紹了jQuery實現(xiàn)的記住帳號密碼功能,結(jié)合完整實例形式分析了jQuery使用jquery.cookie.js插件記錄用戶信息相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的記住帳號密碼功能。分享給大家供大家參考，具體如下：

記住密碼是每個有帳號登錄的網(wǎng)站必備的，現(xiàn)在說一下通過COOKIE實現(xiàn)的記住密碼功能。

<!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\"/>");
 // 設(shè)置為選中狀態(tài)
 document.getElementById("check1").checked=true;
 // 創(chuàng)建一個cookie并設(shè)置有效時間為 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\"/>");
 // 設(shè)置為取消狀態(tài)
 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>