首页 > jquery网页培训班 > Jquery 实现 “下次自动登录” 记住用户名密码功能

Jquery 实现 “下次自动登录” 记住用户名密码功能

发布-网页培训班 | 浏览量-

Jquery将用户名密码存储到cookie中 需要导入jquery.js和jquery.cookie.js获取

 

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <title>test cookie</title>  
  4. <script src="Scripts/jquery.min.js" type="text/javascript"></script>  
  5. <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>  
  6. <script type="text/javascript">  
  7.   
  8.     $(document).ready(function () {  
  9.         if ($.cookie("rmbUser") == "true") {  
  10.         $("#ck_rmbUser").attr("checked", true);  
  11.         $("#txt_username").val($.cookie("username"));  
  12.         $("#txt_password").val($.cookie("password"));  
  13.         }  
  14.     });  
  15.   
  16.     //记住用户名密码  
  17.     function Save() {  
  18.         if ($("#ck_rmbUser").is(":checked")) {  
  19.             var str_username = $("#txt_username").val();  
  20.             var str_password = $("#txt_password").val();  
  21.             $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie  
  22.             $.cookie("username", str_username, { expires: 7 });  
  23.             $.cookie("password", str_password, { expires: 7 });  
  24.         }  
  25.         else {  
  26.             $.cookie("rmbUser", "false", { expire: -1 });  
  27.             $.cookie("username", "", { expires: -1 });  
  28.             $.cookie("password", "", { expires: -1 });  
  29.         }  
  30.     };  
  31. </script>  
  32. </head>  
  33. <body>  
  34.     <div>  
  35.         用户名:<input type="text" id="txt_username"/><br />  
  36.         密码:<input type="text" id="txt_password"/><br />  
  37.         <input type="checkbox" id="ck_rmbUser"/>记住用户名和密码<br />  
  38.         <input type="submit" id="sub" value="登录" onclick="Save()"/>  
  39.     </div>  
  40. </body>  
  41. </html>  

 

HTML5 LocalStorage 本地存储

cookie总结以及html5中的session比较

HTMl5 sessionStorage和localStorage详解

原文地址:http://www.35ui.cn/post/20170302629.html

标签cookiejquery

上一条: Window.open()方法参数详解 js中window.open()的所有参数详细解析
下一条: jQuery判断checkbox是否选中的3种方法

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码