使用jQuery怎么實現(xiàn)一個記住帳號密碼功能

發(fā)布時間：2021-05-07 16:25:16 來源：億速云閱讀：212 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)使用jQuery怎么實現(xiàn)一個記住帳號密碼功能，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

記住密碼是每個有帳號登錄的網(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>

使用jQuery怎么實現(xiàn)一個記住帳號密碼功能

只要在表單輸入帳號密碼，再勾選記住密碼，那么你的帳號密碼就已經(jīng)被存入到cookie了，有效期7天。然后你刷新頁面，發(fā)現(xiàn)帳號密碼還在表單中，不會被清空。

以上就是使用jQuery怎么實現(xiàn)一個記住帳號密碼功能，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

使用jQuery怎么實現(xiàn)一個記住帳號密碼功能

jquery是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽