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>